1

サブリストをクリックすると、以前に開いていた場合は、もう一方が自動的に上にスライドするようにしたいと思います。運が悪かったので.siblingsを使ってみました。これは私のコードとマークアップです：

    /* Shop Filter */
    function shopfilter(that) {
        $(that).toggleClass('active');
        $(that).next('.color:first').slideToggle();
    }

                <ul id="filter_box">
                    <li>
                        <a href="javascript:void(0)" onclick="shopfilter(this);">COLOR</a>
                        <ul class="color">
                            <li>
                                <img src="img/color1.png" alt="color1" width="14" height="15">
                                <span>Color 1</span>
                            </li>
                            <li>
                                <img src="img/color2.png" alt="color1" width="14" height="15">
                                <span>Color 2</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:void(0)" onclick="shopfilter(this);">PRECIO</a>
                        <ul class="color">
                            <li>
                                <span>>50</span>
                            </li>
                            <li>
                                <span>100</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:void(0)" onclick="shopfilter(this);">TALLA</a>
                        <ul class="color">
                            <li>
                                <span>XS</span>
                            </li>
                            <li>
                                <span>S</span>
                            </li>
                        </ul>
                    </li>
                </ul>

それを達成する方法について何かアイデアはありますか？

編集：toggleClass（'active'）は、矢印の方向を変更するために使用されます...

4

2 に答える 2

2

slideUp()私はSylvanus（re：using and ）と似た考えを持っていましたslideDown()が、新しいメニューを開く前にすべてのメニューをリセットするという少し異なるアプローチを採用しました。

function shopfilter(that) {
    //check to see if the current menu is already open
    var isOpen = ($(that).hasClass('active')) ? true : false;

    //reset the menus
    $('.active').removeClass('active');
    $('.color').slideUp();

    // display the selected menu if it was closed
    if (!(isOpen)) {
        $(that).addClass('active');
        $(that).next('.color:first').slideDown();
    }
}

すでに閉じられているメニューは影響を受けませんが、現在開いているメニューはすべて閉じられます。このisOpenチェックでは、メニューをもう一度クリックして閉じるときに、メニューを再度開かないようにします。

于 2013-02-28T17:38:01.327 に答える
0

このようなことを試してください。slideToggleをslideUp/Downに変更して、アクティブなクラスと同期していることを確認しました。

function shopfilter(that) {
    $('.active').slideUp();
    if ($(that).hasClass('active')) {
        $(that).slideUp().removeClass('active');
    } else {
        $(that).slideDown().addClass('active');
    }
}

私はこれのためにフィドルを作りました：http： //jsfiddle.net/dnvaL/

于 2013-02-28T17:14:48.590 に答える