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

它不会关闭的原因是因为兄弟姐妹会看同一级别。因此，在LI元素中，它会查找更多LI个元素。你不是父母的兄弟姐妹LI，而是孩子.submenu。

试试这个：

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

Answer 2

您正试图关闭您即将在当前打开的那个上打开的那个

$（'。menu ul li a'）。点击（function（）{

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

}）;

Answer 3

整个代码将是

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

刚刚更改了切换到最后一行的slideDown ....

我有一个疑问，每个锚点都可以使用用户选择器进行点击...我们可以让它只能点击第一级锚点。任何想法？

使用jQuery定制手风琴

3 个答案: