finding next sibling in a jquery accordian menu_问答_开发者

finding next sibling in a jquery accordian menu

开发者 https://www.devze.com 2023-03-21 17:22 出处：网络

So, my problem is that I can\'t seem to find the next() sibling down to the following nested ul li. when set to hide. I can find it when it\'s not set to hide easily by:

So, my problem is that I can't seem to find the next() sibling down to the following nested ul li. when set to hide. I can find it when it's not set to hide easily by:

This works when I comment out the JS and nothing is hidden: //$(".vertNavigation li ul a").hide();
Add this to click function: $(this).next().css("background", "yellow").slideToggle("normal");

Goal is to do the reverse, click on BUTTON ONE and slideDown nested ul and so on. What is it that I'm missing here?

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>      开发者_如何学C  
        </li>    
    </ul>
</div>

</body>
</html>

CSS CODE:

.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;   
    });

});

Try this:

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

Check the live working solution