Пользовательский Аккордеон с использованием jQuery

Question

Я пытаюсь создать собственный аккордеон, используя jquery, прочитал довольно много решений по stackoverflow, но я просто не могу заставить мой работать, я считаю, что он имеет дело с .siblings.Во всяком случае, вот мой HTML-код:

<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>

А вот мой код JQuery:

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

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

});

Меню открывается нормально, но когда я открываю один, другие не будетзакрыть.

Спасибо за вашу помощь !!

Answer 1

вы пытаетесь закрыть тот, который собираетесь открыть, на тот, который открыт в данный момент

$ ('. Menu ul li a'). Click (function () {

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

});

Answer 2

Весь код будет

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

Только что изменилось переключение на slideDown в последней строке ....

У меня есть одно сомнение, каждый якорь будет кликать с помощью селектора пользователя..Можно ли сделать так, чтобы якорь первого уровня был кликабельным. Любая идея?

Answer 3

Причина, по которой он не закроется, заключается в том, что братья и сестры будут смотреть на одном уровне. Таким образом, в элементе LI он ищет больше элементов LI. Вы не хотите братьев и сестер LI от родителя и закрываете там ребенка .submenu.

Попробуйте это:

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