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

我对 Sylvanus 有类似的想法（re: using slideUp()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 回答