Question

我有一个使用列表和子导航构建的导航作为父列表中的列表。子导航驻留在下一个列表项中，与其对应的主导航链接：

这位于id为“nav”

的div中

<ul>
<li><a href="#">Nav main 1</a></li>
<li>
    <ul>
        <li>sub 1</li>
        <li>sub 2</li>
        <li>sub 3</li>
        <li>sub 4</li>
    </ul>
</li>
<li><a href="#">Nav main 2</a></li>
<li>
    <ul>
        <li>sub 1</li>
        <li>sub 2</li>
        <li>sub 3</li>
        <li>sub 4</li>
    </ul>
</li>
</ul>

目前我有以下jquery：

$(document).ready(function() {
$("#nav ul li a[href^='#']").each(function(){ 
    if ($(this).next().is(':visible')) {
            $(this).next().hide();
 } else {
$("#nav ul li a[href^='#']").each(function(){ 
$(this).next().hide();
 });

$(this).next().show();
}
});

我认为这样可以使所有子菜单隐藏起来然后显示已被点击的子菜单。由于某种原因没有任何反应我检查了控制台（firebug）并且没有显示错误。

现在对此感到沮丧！： - /

编辑：这是答案：

$(document).ready(function() {
$("#nav ul li a[href^='#']").each(function(){ 
$(this).parent().next().hide();
  $(this).click(function() {

        if ($(this).parent().next().is(':visible')) {
            $(this).parent().next().hide();

        } else {
            $("#nav ul li a[href^='#']").each(function(){ 
            $(this).parent().next().hide();

         });
        //then reshow and label the clicked nav
        $(this).parent().next().show();
        }

    });
    });

});

Answer 1

HTML：

<div id="nav">
    <ul>
        <li>
            <a href="#">Nav main 1</a>
            <ul>
                <li>sub 1</li>
                <li>sub 2</li>
                <li>sub 3</li>
                <li>sub 4</li>
            </ul>
        </li>
        <li>
            <a href="#">Nav main 2</a>
            <ul>
                <li>sub 1</li>
                <li>sub 2</li>
                <li>sub 3</li>
                <li>sub 4</li>
            </ul>
        </li>
    </ul>
</div>

JavaScript：

var s = $('#nav ul ul').hide();

$('#nav a').click(function() {
    var u = $(this).next();

    u.is(':visible') ? u.hide() : ( s.hide(), u.show() );    
    return false;
});

现场演示： http://jsfiddle.net/Tq6LM/1/

Answer 2

没关系......我已经弄明白了。再写出来一定有帮助。我需要调用.parent（）似乎我试图调用下一个href，我需要调用下一个列表！

Answer 3

DEMO： http://so.devilmaycode.it/jquery-and-selecting-the-next-list-items-objects

您的Javascript代码应为：

$(function() {
    $('#main-nav li').click(function(e) {
        e.preventDefault();
        $('#main-nav li ul').slideUp(500);
        $(this).find('ul:not(:visible)').slideDown(500);
    });
});

CSS

的一点点

#main-nav li ul { display:none }

您的HTML应如下所示：

<ul id="main-nav">
<li><a href="#">Nav main 1</a>
    <ul>
        <li>sub 1</li>
        <li>sub 2</li>
        <li>sub 3</li>
        <li>sub 4</li>
    </ul>
</li>
<li><a href="#">Nav main 2</a>
    <ul>
        <li>sub 1</li>
        <li>sub 2</li>
        <li>sub 3</li>
        <li>sub 4</li>
    </ul>
</li>
</ul>

jQuery并选择下一个列表项对象

3 个答案: