0

私は3つのdivを作成しようとしていますが、最初はすべて閉じています。divを閉じると、右側のスパンが表示されます。これは右向きの矢印です。任意のdivをクリックすると、対応するスパンの矢印が下を向くようにします。そのdivは折りたたまれているので、正しい方向を向いているはずです。これが私のフィドルです。何かが足りないと思います。誰かがこれを手伝ってくれますか。また、誰かがこのタスクを実行するためのより良い方法（全体の崩壊、拡張）を知ることができれば、それは大いにありがたいです。ありがとう

4

3 に答える 3

1

外観を切り替えるslideToggle（）を使用していますが、割り当てているのは$（'＃sp2'）。html（ "▼"）;のみです。クリックあたり、つまりdivがクリックされるたびに、スパンはこの値を取得します。divが展開されているか折りたたまれているかを確認し、適切なコードを使用してスパンを設定する必要があります。HTML▶jQuery

$('#one').click(function() {
        $('.sub1').slideToggle("slow");
        if ($("#sp1").hasClass("expand")) {
            $('#sp1').html("▼").removeClass("expand");
        }
        else {
            $('#sp1').html("▶").addClass("expand");
        }

        $('.sub2').slideUp("slow");
        $('.sub3').slideUp("slow");


    });
于 2012-06-06T07:44:12.540 に答える
1

クラスを使用して要素をグループ化するなど、コードにいくつかの修正を加えました。コードは元々選択された矢印に設定されていたため、クリックしたdivのアクションを完了する前に、すべてのdivをデフォルトの状態に戻す必要がありました。

これを試して：

$('.main').click(function() {
    var $el = $(this);

    if (!$el.next(".sub").is(":visible")) {   
        // reset all
        $('.sub').slideUp("slow");
        $('.arrow').html("▶");

        // set current
        $el.next('.sub').slideDown("slow");
        $('.arrow', $el).html("▼");
    }
});

<div class="main">
    <span class="arrow">&#9654;</span>
</div>
<div class="sub">
    <p>Here there are many images</p>
    <p>Here there are many images</p>
    <p>Here there are many images</p>
    <p>Here there are many images</p>
    <p>Here there are many images</p>
    <p>Here there are many images</p>
</div>

フィドルの例

于 2012-06-06T07:44:39.577 に答える
1

こちらがデモです

テストしたプロジェクトで使用しました:)


ただし、画像を下に追加し、マシンのURLディレクトリを残しておく必要があることに注意してください

jsfiddleデモメニューのドロップダウン

私はこのJQueryコードといくつかを使用しましたCSSそしてもちろんHTML

 $(document).ready(function()
    {
        //slides the element with class "menu_head" when paragraph with class "menu_head" is clicked
        $("#firstpane p.menu_head").click(function()
        {
            $(this).css({backgroundImage:"url(images/menu/down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
            $(this).siblings().css({backgroundImage:"url(images/menu/left.png)"});
        });

    });


于 2012-06-06T07:55:23.353 に答える