Question

这个单页网站遇到问题，您可以点击链接，然后向下滑动一个框，但它还需要一个关闭功能才能将其重新启动。问题是关闭按钮位于要动画的元素中，所以它需要由其父元素调用，我猜想。我已经尝试了各种不同的方法来实现这一点，但似乎没有任何工作。如果您转到http://upsilon.lunariffic.com/~swstr0并点击关于 - > Sarah Weintraub，请尝试点击关闭链接。什么也没发生，也没有错误。那么该怎么办？这是一个例子：

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("li.btn-home a").click(function(){
        jQuery(this).parent.slideUp( "slow" );
        return false;
    });
});
</script>

Answer 1

试试这个，

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("a.close-con").click(function(){
        jQuery(this).parents("div#panel").slideUp( "slow" );
        return false;
    });
});
</script>

.parent()只会遍历一个级别，.parents()会遍历父母的父母

编辑：全局选择器[需要jQuery 1.7 +]

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("body").on("click","a.close-con", function(){
        jQuery(this).parents("div#panel").slideUp( "slow" );
        return false;
    });
});
</script>

Answer 2

试试这个： -

$(".close-con").click(function(){
    $("#panel").animate({height:"0px"},800);
});

<强>更新

我想我遇到了这个问题： -

当我检查你的源代码时，它向我显示了下面的结构，即我要求你添加的代码，添加在这行下面的页脚上“ <script type='text/javascript' src='http://upsilon.lunariffic.com/~swstr0/wp-content/themes/swsg/js/functions.js?ver=20131209'></script>“，如下所示： -

<script type='text/javascript' src='http://upsilon.lunariffic.com/~swstr0/wp-content/themes/swsg/js/functions.js?ver=20131209'></script>
<script type='text/javascript' src='http://upsilon.lunariffic.com/~swstr0/wp-content/plugins/logo-slider/jquery.cycle.all.min.js?ver=3.9.1'></script>
<script type="text/javascript">
    jQuery(function($) {
    $("li.btn-slide a").on('click', function(e){
        e.preventDefault();

        var post_url = $(this).attr("href");
        var post_id  = $(this).attr("rel");

        $("#page-con").html("loading...")
                      .load(post_url, function() { // content loaded callback

            var pageconHeight = $("#page-con").height();  // Find the height of the content inside #panel
             $("#panel").animate({height: pageconHeight}, "slow"); // Animate the height of #panel

        });
    });
});
</script>

<script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery("li.btn-home a").click(function(){
        jQuery("#panel").animate({height:0}, "slow");
        return false;
    });
});
</script>

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("a.close-con").click(function(){
        jQuery(this).parents("div#panel").animate({height:0}, "slow");
        return false;
    });
});
</script>

因此，这里的functions.js文件正在创建关闭链接功能的问题。所以你需要做的就是获得所需的代码，即： -

  <script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("a.close-con").click(function(){
            jQuery(this).parents("div#panel").animate({height:0}, "slow");
            return false;
        });
    });
    </script>

并粘贴在上面： -

<script type='text/javascript' src='http://upsilon.lunariffic.com/~swstr0/wp-content/themes/swsg/js/functions.js?ver=20131209'></script>

这将解决您的问题。

JQuery：调用对象onClick的父对象的问题

2 个答案: