finding next sibling in a jquery accordian menu
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
加载中,请稍侯......
精彩评论