JQuery与WordPress网站上的两个点击脚本冲突

Question

我已经检查了StackOverflow上的一些链接，但似乎没有任何帮助。我在这里有一个小站点，在页面中间有一个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>

关于如何让这两个剧本演得好看，有什么想法吗？

*更新*

所以我决定将两个点击功能合并为一个。这有点奏效，但并不完全。面板现在关闭了，但文本没有加载到#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

您的意思是将"加载内容"事件添加到所有链接吗？

使用jQuery('#nav-main ul li a')的选择器将针对菜单中的所有<a>标记，而不仅仅是顶级标记。要更具体地针对链接，您可以在第二个脚本中这样做：

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

这样，您就不会将动态内容事件添加到所有链接中，只会添加到您想要针对的顶级链接中。如果你想玩的话，看看这个Codepen。

Answer 2

好的，我有答案了。在Codepenhttp://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模板中的调用。所以我只得到了冠军。