Question

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

以下是代码：

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

您没有停止从子项

传播点击事件

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

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

演示：Fiddle

jQuery手风琴导航菜单

1 个答案: