1

私はJavaScriptにかなり慣れていないので、コード内の各要素がクリックされたときにドロップダウンする方法を理解しようとしています。

一見すると、$(this) を追加する必要があると思いました。各イベントには影響しませんでしたが、ページを更新しても動作には影響しませんでした。すべての div は、1 回のクリックでアニメーション化され続けます。

ここにスクリプトがあります

        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);
    });
})

これを行う必要があるタグにクラスを追加することをお勧めします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 に答える