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检查确保您再次点击它以关闭它时不会重新打开菜单。

Answer 2

尝试这样的事情。我将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/

打开一个子列表时的滑动子列表

2 个答案: