...

View Full Version : jquery: toggling the sibling



lauthiamkok
08-06-2010, 05:30 PM
Hi,

I want to toggle the next sibling of a link in a list like this,


<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a>
<ul class="selected">
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
<li><a href="#">2.3</a></li>
</ul>
</li>
<li><a href="#">3</a></li>
<li><a href="#">4</a>
<ul class="selected">
<li><a href="#">4.1</a></li>
<li><a href="#">4.2</a></li>
<li><a href="#">4.3</a></li>
</ul>
</li>
<li><a href="#">5</a></li>
</ul>

and this is my jquery,


$(document).ready(function(){

$("a").each(function () {
if ( $(this).siblings().size() > 0)
{
$(this).append("<span class='has-child'>has child</span>");

$(this).toggle(
function (){
$("ul").removeClass("showme");
$(this).siblings(".selected").addClass("showme");
//$(this).next().css({display: "block"});
},
function (){
$(this).siblings(".selected").removeClass("showme");
//$(this).next().css({display: "none"});
});

}
});

$('ul > li > ul > li:last-child > a').css('background','yellow');

});

the css,


ul > li > ul {
display:none;
}

ul > li:hover ul{
display: block;
}
.showme {
display: block;
}

first of all, it seems fine - I can toggle the targeted sibling, but why after the first toggle at any parent, I have to click twice sometime to hide other siblings when I click/ toggle at the current parent?

here is the live site if I am not explaining it clearly,
http://lauthiamkok.net/tmp/jquery/toggle/

Many thanks,
Lau



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum