jQuery手风琴导航菜单

Question

我有一个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>

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的单击功能正常工作。 但是我只能单击文本来获得手风琴效果。

请帮我。

Answer 1

您没有停止子项目中click事件的传播

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

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

演示： 小提琴