javascript - 打开一个子列表时滑动子列表

Question

我希望当我点击一个子列表时，如果另一个子列表之前打开过，它会自动向上滑动。我尝试使用 .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') 只是用来改变箭头的方向...

Answer 1

我对 Sylvanus 有类似的想法(关于:使用 slideUp() 和 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 检查可确保您在再次单击菜单以将其关闭时不会重新打开菜单。