javascript - jQuery Accordion 导航菜单

Question

我有一个 jquery 垂直 Accordion 导航菜单。一切正常，但当我展开一个列表项时，如果我单击一个列表项，它就会隐藏。

代码如下:

HTML :

<div class="sidebar">
        <ul>
            <li>
                <a href="javascript:void(0)">Item 1 <i class="sidebar-icon glyphicon glyphicon-chevron-left"></i></a>
                <ul class="sub-menu">
                    <li>
                        <a href="javascript:void(0)">Sub Item 1</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">Sub Item 2</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0)">Item 2 <i class="sidebar-icon glyphicon glyphicon-chevron-left"></i></a>
                <ul class="sub-menu">
                    <li>
                        <a href="javascript:void(0)">Sub Item 1</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">Sub Item 2</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">Sub Item 3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0)">Item 3 <i class="sidebar-icon glyphicon glyphicon-chevron-left"></i></a>
                <ul class="sub-menu">
                    <li>
                        <a href="javascript:void(0)">Sub Item 1</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">Sub Item 2</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">Sub Item 3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0)">Item 4 <i class="sidebar-icon glyphicon glyphicon-chevron-left"></i></a>
                <ul class="sub-menu">
                    <li>
                        <a href="javascript:void(0)">Sub Item 1</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">Sub Item 2</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

JS :

function toggleAccordion(li) {
    if(li.hasClass('active')) {
        li.removeClass('active');
        $('.sub-menu', li).slideUp();
        $('i', li).removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-left');
    }
    else {
        $('.sidebar > ul > li.active .sub-menu').slideUp();
        $('li i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-left');
        $('li.active').removeClass('active');
        li.addClass('active');
        $('.sub-menu', li).slideDown();
        $('i', li).removeClass('glyphicon-chevron-left').addClass('glyphicon-chevron-down');
    }
};

$('.sidebar > ul > li').click(function(ev) {
    ev.stopPropagation();
    toggleAccordion($(this));
});
$('.sidebar > ul > li > a').click(function(ev) {
    ev.stopPropagation();
    toggleAccordion($(this).parent());
});

我确实希望它在单击已展开的列表项时折叠起来。

我希望它在整行中都可以点击。

如果我将点击功能设置为 .sidebar ul li a 它工作正常。但我只能单击文本以获得 Accordion 效果。

请帮帮我。

Answer 1

您没有停止从子元素传播点击事件

$('.sidebar > ul > li').click(function (ev) {
    toggleAccordion($(this));
}).find('ul').hide();

$('.sidebar li').click(function (e) {
    e.stopPropagation()
});

演示:Fiddle