jQuery手风琴导航菜单

Question

I've got a jquery vertical accordion navigation menu. Everthing's working fine but when i expand a list item and if I click on a list item it's getting hidden.

Here's the code:

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());
});

I do want it to be collapsed when clicked on a list item that's been expanded.

And I want it clickable in the entire row.

If i make the click function to .sidebar ul li a it's working fine. But I'm able to click only on the text to get the accordion effect.

Please help me.

Answer 1

You were not stopping the propagation of click event from the sub items

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

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

Demo: Fiddle