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>

关于如何使两个脚本运行良好的任何想法？

*更新*

所以我决定将两个点击功能合二为一。它有点工作但不完全。该面板现在已关闭，但文本未加载到＃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')

这样您就不会将动态内容事件添加到所有链接，只会添加您要定位的顶级链接。如果你想玩它，请查看this Codepen。

Answer 2

好的，我有答案。它位于http://codepen.io/anon/pen/dsloA的Codepen中。这就是我引用链接的方式。我需要做

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模板中的调用。所以我只得到了头衔。

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

2 个答案: