Question

我对javascript很新，并且一直试图了解如何让我的代码中的每个元素在点击时下拉。

乍一看，我以为我需要添加$（这个）。对于每个事件，但刷新我的页面不会影响行为，所有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/，因此您可以看到我要传达的问题......

有人能指出我如何解决这个问题吗？

Answer 1

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

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

我建议您为需要执行此操作的代码添加一个类，例如class="toggle"

Answer 2

我编辑你的一点点（约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
            );
        });
    }   
}

Javascript单元素下拉列表

2 个答案: