Question

所以，我的问题是我似乎无法找到下一个（）兄弟到下面的嵌套ul li。设置为隐藏时。当它不能通过以下方式轻松隐藏时，我可以找到它：

当我注释掉JS并且没有隐藏任何东西时，这是有效的： //$(".vertNavigation li ul a“）。hide（）;
将此添加到点击功能： $（this）.next（）。css（“background”，“yellow”）。slideToggle（“normal”）;

目标是反过来，点击BUTTON ONE和slideDown嵌套ul等等。我在这里失踪的是什么？

HTML CODE：

</head>

<body>
<div class = "vertNavigation">
    <ul>
        <li><a href="#" id = "button One">BUTTON ONE</a>
            <ul>
                <li><a href="#">sub menu 1</a>
                <li><a href="#">sub menu 2</a>
                <li><a href="#">sub menu 3</a>
                <li><a href="#">sub menu 4</a>
            </ul>
        </li>
        <li><a href="#" id = "button Two">BUTTON TWO</a>
            <ul>
                <li><a href="#">sub menu 1</a>
                <li><a href="#">sub menu 2</a>
                <li><a href="#">sub menu 3</a>
                <li><a href="#">sub menu 4</a>
            </ul>
        </li>    
        <li><a href="#" id = "button Two">BUTTON THREE</a>
            <ul>
                <li><a href="#">sub menu 1</a>
                <li><a href="#">sub menu 2</a>
                <li><a href="#">sub menu 3</a>
                <li><a href="#">sub menu 4</a>
            </ul>        
        </li>    
        <li><a href="#" id = "button Two">BUTTON FOUR</a>
            <ul>
                <li><a href="#">sub menu 1</a>
                <li><a href="#">sub menu 2</a>
                <li><a href="#">sub menu 3</a>
                <li><a href="#">sub menu 4</a>
            </ul>        
        </li>    
    </ul>
</div>

</body>
</html>

CSS代码：

.vertNavigation ul {
    list-style-type: none;
    padding-left: 0;
    margin-lef: 0;
}

.vertNavigation li {
    display: inline;
}

.vertNavigation a { /*main menu*/
    display: block;
    width: 100px;
    text-decoration: none;
    margin: 2px 0px 2px 0px;
    padding: 6px 15px 3px 15px;
    background-color: #EAEAEA;
    color: #333;

    font-size: .8em;
}

.vertNavigation li ul a {  /*sub menu*/
    text-decoration: none;
    border-bottom: solid 1px #333;
    border-length: 50px;
    margin: 2px 0px 2px 0px;
    background-color: #FFF;
    color: #333;
}

JS CODE：

google.load("jquery", "1.6.2");

google.setOnLoadCallback(function(){

    $(".vertNavigation li ul a").hide();
    $(".vertNavigation ul li a").click(function()
    {
        //$(this).next().slideToggle("normal");
        $(this).next().slideDown("normal");

        return false;   
    });

});

Answer 1

试试这个：

$(".vertNavigation > ul > li > ul").hide();
$(".vertNavigation > ul > li > a").click(function(e){
    e.preventDefault();
    $(this).next('ul').slideToggle();
});

Check the live working solution

在jquery手风琴菜单中寻找下一个兄弟姐妹

1 个答案: