使用jQuery自定义手风琴

Question

I'm trying to create a custom accordion using jquery, have read through quite a few solution on stackoverflow but I just can't seem to get mine to work, I believe it has to deal with the .siblings. Anyway, here is my html code:

<div class="menu">
    <ul>
        <li class="current">
            <a href="#" class="current"><img class="icon" src=""/>Dashboard</a>
        </li>
        <li>
            <a href="#"><img class="icon" src=""/>Mail</a>
            <ul class="submenu">
                <li>
                    <a href="#" title="">Write New</a>
                </li>
                <li>
                    <a href="#" title="">Junk</a>
                </li>
                <li>
                    <a href="#" title="">Deleted</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#"><img class="icon" src=""assets/colors.png""/>Child</a>
            <ul class="submenu">
                <li>
                    <a href="#">Child 1</a>
                </li>
                <li>
                    <a href="#">Child 2</a>
                </li>
                <li>
                    <a href="#">Child 3</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#"><img class="icon" src=""/>Grid</a>
        </li>
        <li>
            <a href="#"><img class="icon" src=""/>Class</a>
        </li>
    </ul>
</div>

And here is my jQuery code:

$('.menu ul li a').click(function() {

    $(this).next('.submenu').siblings('li').slideUp();
    $(this).next('.submenu').slideToggle();

});

The menu toggles open fine, but when I open one, the others won't close.

Thanks for your help !!

Answer 1

The reason why it won't close is because the siblings will look at the same level. So within the LI element it looks for more LI elements. You wan't the sibling LI 's from the parent, and close there child .submenu .

Try this:

$(this).parent().siblings('li').find('.submenu').slideUp();

Answer 2

you're trying to close the one that you're about to open on the one that is currently open

$('.menu ul li a').click(function() {

$('.current').removeClass('current').next('.submenu').siblings('li').slideUp();
$(this).addClass('current').next('.submenu').slideToggle();

});

Answer 3

The whole code will be

$(this).parent().siblings('li').find('.submenu').slideUp();
$(this).next('.submenu').slideDown();

Just changed toggle to slideDown in last line....

I have one doubt ,every anchor will be clickable using user selector... can we make it only first level anchor clickable .any idea ?