0

したがって、矢印がクリックされたときに別のdivの後ろからスライドダウンしたいdivがあり、フォームボタンをクリックすると再び非表示になります。これのほとんどをコーディングできますが、div をビューから非表示にしてから、slideToggle を使用してドロップダウンにする方法がわかりません。

編集: 以下の人々が示唆したように (感謝)、slideToggle() は私が必要としているものではなく、むしろ animate() であることがわかりました - 以下のコードは機能していないようです。jQuery UI へのリンクを追加しましたしかし、まだ何もありません。

HTML

    <div class="schedule">
        <div class="scheduletop">
            <a href="/"><img src="/images/audit.png"></a>
        </div><!-- .scheduletop -->
        <div class="schedulebottom">
            <?php echo do_shortcode("[contact-form-7 id='61' title='Audit']"); ?>
        </div><!-- .schedulebutton -->
        <div class="thestuff">
            <h3>TEST!</h3>
        <div class="slide">
            CLICK TEST TO SLIDE
        </div><!-- .slide -->
        </div><!-- .thestuff -->
    </div><!-- .schedule -->

jQuery

$(document).ready(function() {
$(".slide").click(function() {
        $(".thestuff").animate({"down": "150px"}, "slow");
    });
});

何か案は？

4

4 に答える 4

1

.animate() を使用する必要があると言われました。ここ
で簡単な例を作成しました。 ここにjsコードがあります

$(document).ready(function () {
    $(".thestuff").click(function () {
        $el = $(this).find(".slide");
        if (!$el.data('up')) {
            var h3Margin = parseInt($(this).children().eq(0).height(), 10);
            var margin = "-" + ($el.height() + h3Margin) + "px";
            $el.css("z-index", -10);
            $el.animate({
                "margin-top": margin
            });
            $el.data('up', true);
        } else {
            $el.animate({
                "margin-top": 0
            }, {
                complete: function () {
                    $el.css("z-index", 1);
                }
            });

            $el.data('up', false);
        }
    });
});

z-indexの代わりに不透明度を使用することもできますが、それはあなた次第です

于 2013-03-27T16:37:02.930 に答える
1 
    $(".slide").animate(
        { top: "+=150" }, 
        1000, 
        function () {
            $(this).hide();
        }
    );

上記のコードは、「top」属性を増やすことで、div を 150 ピクセル下にアニメーション化します。アニメーションが終了すると、.slide div が非表示になります。

編集：そこにある「1000」は、アニメーションを完了するのに1秒かかることを示しています.

edit2: ああ、.slide の属性「position」が「relative」に設定されていることも確認してください。

于 2013-03-27T16:37:09.047 に答える
1

slideToggle()この状況で使用すべき関数ではありません。一致した要素の高さのみを変更しますが、一方、.animate()メソッドは div を目的の方向に移動できますが、アニメーションが終了しても要素を非表示にしないため、必要に応じてコールバックを使用する必要がありますそれを達成します。別の div の背後に div を配置する場合は、z-indexcss プロパティを使用する必要があります。

于 2013-03-27T15:58:00.207 に答える
-1

わかりましたので、slideToggle() で探しているものを達成できるようです。クリックするまでメイン コンテンツ コンテナを表示しないように設定する必要がありました (display: none; を CSS に追加)。

$(document).ready(function() {
$(".slide").click(function() {
    $(".thestuff").slideToggle("slow");
    });
});

同様の解決策を見つけようとしている人は、jsfiddleを確認してください。

于 2013-03-27T16:40:36.490 に答える