0

我已经查看了 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>
4

2 回答 2

0

好的，我有答案了。它位于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 模板中的调用。所以我只得到标题。

于 2014-02-28T21:59:11.897 回答
0

您的意思是向所有链接添加“加载内容”事件吗？

您使用的选择器jQuery('#nav-main ul li a')将定位菜单中的所有<a>标签，而不仅仅是顶级标签。要更具体地定位链接，您可以在第二个脚本中执行此操作：

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

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

于 2014-02-27T04:29:21.767 回答