Javascript jQuery手风琴导航菜单

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

代码如下：

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>

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

，则工作正常。但我只能点击文本来获得手风琴效果

---

请帮助我。

您没有停止子项中单击事件的传播

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

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

---

演示：

如何使所有东西在装载时都折叠起来？非常感谢。