1

我对javascript相当陌生，并且一直在尝试了解如何使代码中的每个元素在单击时下拉。

乍一看，我以为我需要添加 $(this)。对于每个事件，但刷新我的页面并不会影响行为，所有 div 都会在单击时继续向下动画。

这是脚本

        function slideDiv(elem) {

        if ($(".slidePanel").is(":visible")) {

            $(".contentFade").animate(
                {
                    opacity: "0"
                },

                600,

                function(){
                    $(".slidePanel").slideUp();
                }
            );
        }
        else {
            $(".slidePanel").slideDown(600, function(){
                $(".contentFade").animate(
                    {
                        opacity: "1"
                    },
                    600
                );
            });
        }   
    }

我已经在这里上传了当前代码http://jsfiddle.net/alexmk92/z59p8/所以你会看到我试图传达的问题......

有人能指出我如何解决这个问题的正确方向吗？

4

2 回答 2

1

所有这些答案都过于复杂......

$('a').click(function() {
    $(this).next().slideToggle(400, function() {
        $(this).children('.contentFade').animate({opacity:'1'},400);
    });
})

我建议在你的 a 标签中添加一个需要这样做的类class="toggle"

于 2013-03-11T16:58:04.070 回答
0

我编辑你的一点点（大约 4-6 行）

首先将您slidePanel的链接和在某些 div 中向上滑动的链接包装起来

<div> <!-- new line-->
<a href="#" onclick="slideDiv(this);"> <p class="blueText">A post title here :</p> </a>

<div class="slidePanel">
    <div class="contentFade">
        <p class="p1">Some text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my page</p>
    </div>
    <!-- end contentFade -->
    </div>
    <!-- end sldiePanel -->
    <!-- end post1 -->
</div><!-- new line-->
<div><!-- new line-->
<!-- second post to show issue -->
<a href="#" onclick="slideDiv(this);"> <p class="blueText">A post title here :</p> </a>

<div class="slidePanel">
    <div class="contentFade">
        <p class="p1">Some text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my page</p>
    </div>
    <!-- end contentFade -->
    </div>
    <!-- end sldiePanel -->
    <!-- end post1 -->
    </div><!-- new line-->

然后为你的js代码

function slideDiv(elem) {

  if ($(".slidePanel").is(":visible"))//new line
      $(".slidePanel").slideUp();//new line
    if ($(".slidePanel",$(elem).parent()).is(":visible")) {//notice the $(elem).parent()
        $(".contentFade",$(elem).parent()).animate(
            {
                opacity: "0"
            },

            600,

            function(){
                $(".slidePanel",$(elem).parent()).slideUp();
            }
        );
    }
    else {
        $(".slidePanel",$(elem).parent()).slideDown(600, function(){
            $(".contentFade",$(elem).parent()).animate(
                {
                    opacity: "1"
                },
                600
            );
        });
    }   
}
于 2013-03-11T16:55:12.947 回答