Question

单击<li>时，每个<i>内部会展开并折叠后面的<ul>。需要进行设置，以便在点击其他<i>后，它会折叠之前的<ul>。

查看我的fiddle

<ul class="nav-main">
    <li> <a href="/en/courses">Courses</a><i class="expand closed"></i>

        <ul class="drop">
            <li><a href="#">Campuses</a>
            </li>
            <li><a href="#">Online Learning</a>
            </li>
            <li><a href="#">Start dates and schedules</a>
            </li>
            <li><a href="#">Learning and Support</a>
            </li>
        </ul>
    </li>
    <li> <a href="#">Outcomes</a><i class="expand closed"></i>

        <ul class="drop">
            <li><a href="#">Career Starter Program</a>
            </li>
            <li><a href="#">Progress to a degree</a>
            </li>
            <li><a href="#">Career Pathways</a>
            </li>
        </ul>
    </li>
</ul>

Answer 1

您需要循环浏览每个面板，并确保在单击某个项目时关闭它，关闭任何不是单击的项目。这是你的小提琴更新：https://jsfiddle.net/zb2eu19g/8/

相关的JS代码：

// Main Menu Slider
$('.nav-main .expand').on('click', function (e) {

    var clickedPanel = this;

    $('.nav-main .expand').each(function() {
        if (this !== clickedPanel && !$(this).hasClass('closed')) {
            $(this).addClass('closed').next('ul').slideUp(300, function () {
                $(this).removeAttr('style');
            });
        }
    });

    if ($(this).hasClass('closed')) {
        $(this).removeClass('closed').next('ul').slideDown(300);
    } else {
        $(this).addClass('closed').next('ul').slideUp(300, function () {
            $(this).removeAttr('style');
        });
    }
    e.preventDefault();
});

如果是我，我会提取逻辑来打开和关闭项目到函数中去除这里的一些重复，但这会给你一个开始。

jQuery：一次只展开一个面板

1 个答案: