jQuery:一次只展开一个面板

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

您需要遍历每个面板并确保在单击元素时关闭它，关闭所有未单击元素的面板。这是你的 fiddle 更新: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();
});

如果是我，我会将打开和关闭元素的逻辑提取到函数中，以消除此处的一些重复，但这给了你一个开始。