的jQuery：切換兄弟姐妹

Question

我想切換在這樣的列表的鏈接的下一個兄弟，

<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> 

，這是我的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'); 

}); 

的CSS，

ul > li > ul { 
     display:none; 
    } 

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

首先，它似乎很好 - 我可以切換目標兄弟，但爲什麼在第一次切換任何父母后，我必須點擊兩次t o當我點擊/切換當前父母時隱藏其他兄弟姐妹？

這裏是活的網站，如果我沒有解釋清楚， http://lauthiamkok.net/tmp/jquery/toggle/

非常感謝， 劉

Answer 1

取而代之的是.toggle()函數，它是在錯誤的狀態結束了，你CA只是用的正常click功能和使用.toggleClass()代替，就像這樣：

$(this).click(function(){ 
    var myUL = $(this).siblings(".selected").toggleClass("showme"); 
    $("ul").not(myUL).removeClass("showme"); 
}); 

You can give it a try here，這樣做一.toggleClass()，然後通過.not()篩選出的兄弟元素，查找所有其他<ul>元素。

這會清理一點使其更容易，它解決的主要問題是不排除.removeClass()的兄弟，這是導致您的.toggle()狀態在之前不正確的原因。

Answer 2

請參閱修改的功能。只需一個改變，它會正常工作。

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

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

    } 
});