JQuery與WordPress網站上的兩個點擊腳本衝突

Question

我已經檢查了一些StackOverflow上的鏈接，但似乎沒有任何幫助我的問題。 I have a small site here在頁面中間有一個JQuery手風琴導航。

應該發生的事情是當我點擊其中一個主要鏈接時，手風琴應該滑下來並顯示子鏈接。點擊它會滑下一個名爲#panel的div，它應該帶入動態內容。內容不會被加載，但面板不會滑落。如果我刪除了動態內容的Javascript，面板動畫確實有效。

很顯然，這裏有衝突，但我不確定它可能會治癒它。已經嘗試添加evt.preventDefault（）;到我的點擊功能，但無濟於事。下面是面板，我想補充的開啓和關閉的代碼腳本的第二個例子中，我試圖做到這一點：

//Opening and closing the top bar 


    var topBarHeight = jQuery('#page-con').height(); 
    var topBarMargin = -topBarHeight - 1; 
    var topBarOpen = false; 

    function topBarContentSizeCheck(){ 
     topBarHeight = jQuery('#page-con').height(); 

     if(topBarOpen==false){ 
      jQuery('#panel').css({ 
       height: 0 
      }); 
     } 
     else{ 
      jQuery('#panel').css({ 
       height: topBarHeight 
      }); 
     } 
    } 

    jQuery('#panel').css({ 
     height: 0 
    }); 

    jQuery('#nav-main ul ul li a').click(function(evt){ 
     var href = jQuery(this).attr('href');   
     if(href=="#panel"){  
      if(topBarOpen==false){ 
      topBarOpen = true; 

      jQuery('#panel').animate({ 
       height: topBarHeight, 
       useTranslate3d: true 
      }); 
      } 

      else{ 

      topBarOpen = false; 

      jQuery('#panel').animate({ 
       height: 0, 
       useTranslate3d: true 
      }); 

      jQuery('html,body').animate({ 
       scrollTop: 0, 
       useTranslate3d: true 
      }, 400);  
      } 
      return false; 
     } 
    }); 

    jQuery('#closelink').click(function(evt){ 
     evt.preventDefault(); 

     topBarOpen = false; 

      jQuery('#panel').animate({ 
       height: 0 
      }); 

      jQuery('html,body').animate({ 
       scrollTop: 0 
      }, 400); 



      return false; 

    }); 
</script> 

然後將代碼加載動態內容（更小的）：

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
jQuery.ajaxSetup({cache:false}); 
jQuery('#nav-main ul li a').click(function(){ 
    var post_url = $(this).attr("href"); 
    var post_id = $(this).attr("rel"); 

    jQuery("#page-con").html("loading..."); 

jQuery("#page-con").load(post_url); 
window.location.hash = post_id; 
return false; 
}); 
}); 
</script> 

關於如何使這兩個腳本打好的任何想法？

* UPDATE *

所以我決定將兩次單擊功能爲一體的結合。它有用但不完全。該面板現在降下來，但文本沒有加載到＃page-con div中。控制檯沒有這樣的說法。它甚至列出它確實對服務器進行了適當的調用。這是新的代碼。

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
jQuery.ajaxSetup({cache:false}); 
jQuery(".btn-slide").click(function(){ 
    var post_id = jQuery(this).attr("rel") 
    jQuery("#page-con").html("loading..."); 
    jQuery("#page-con").load("http://upsilon.lunariffic.com/~swstr0/swsg-ajax/",{id:post_id}); 
    jQuery("#panel").slideToggle("slow"); 
    jQuery(this).toggleClass("active"); 
    return false; 
}); 
}); 
</script> 

Answer 1

好的，我有答案。這是在Codepen的http://codepen.io/anon/pen/dsloA這是我如何引用鏈接。我需要做的

jQuery("li.btn-slide a").click(function(){ 

，而不是

jQuery(".btn-slide").click(function(){ 

因此函數是：

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
jQuery.ajaxSetup({cache:false}); 
jQuery("li.btn-slide a").click(function(){ 
    jQuery("#panel").slideToggle("slow"); 
    jQuery(this).toggleClass("active"); 
    var post_url = jQuery(this).attr("href"); 
    var post_id = jQuery(this).attr("rel"); 
    jQuery("#page-con").html("loading..."); 
    jQuery("#page-con").load(post_url); 
    window.location.hash = post_id; 
    return false; 
}); 
}); 
</script> 

只有現在的問題是由於某種原因，它不尊重我，我page.php文件調用模板。所以我只拿到標題。

Answer 2

您是不是要將「加載內容」事件添加到所有鏈接？

您使用的選擇器jQuery('#nav-main ul li a')將針對菜單中的所有<a>標籤，而不僅僅是頂級標籤。要定位鏈接更具體的，你可以在你的第二個腳本來完成：

jQuery('#nav-main > ul > li > a') 

這樣，你不動態內容事件添加到所有的鏈接，只是你要定位的頂級的。如果你想玩它，請查看this Codepen。