2010-05-13 296 views
0

只是想知道是否有人可以提供一些關於我試圖簡化手風琴的基本建議。有一個工作版本,但它似乎太複雜。這是我的新JS。jQuery手風琴

$(document).ready(function() { 
    $("#themes li ul").hide(); 
    $("#themes li").hover(function() { 
     $("ul").show(); 
     }, function() { 
     $("li ul").hide(); 
    }); 

的標記看起來是這樣的:

<ul> 
    <li>Tier 1 
    <ul> 
     <li>Tier 2</li> 
     <li>Tier 2</li> 
    </ul> 
    </li> 
    <li>Tier 1 
    <ul> 
     <li>Tier 2</li> 
     <li>Tier 2</li> 
    </ul> 
    </li> 
</ul> 

我的腳本工作正常的。但是,當任何父母li被徘徊時,它會顯示所有孩子的ul,並且當它被隱藏時隱藏所有孩子的ul。只是不知道如何才能讓它達到答案。)只有在顯示li時才顯示li> ul。和B.)只有當另一個被徘徊時(不是它本身),才能隱藏顯示的li> ul。示例+解釋會特別有用!謝謝!!

回答

1

爲什麼不能使用JQuery UI Accordion。這將解決您的問題。 JS的是和HTML是這裏

<div id="accordion"> 
    <h3><a href="#">First header</a></h3> 
    <div>First content</div> 
    <h3><a href="#">Second header</a></h3> 
    <div>Second content</div> 
</div> 

jQuery(document).ready(function(){ 
    $('#accordion').accordion(); 
}); 

很簡單EDITED

與您的代碼的問題是它隱藏和顯示任何「禮」組件內的「UL」所有組件上的任何懸停一個李。這裏是解決這個問題的代碼,這將隱藏/顯示當前'li'內的'ul'

  $(document).ready(function() { 
      $("#themes li ul").hide(); 
      $("#themes li").hover(function() { 

       $(this).find("ul").show(); 
       }, function() { 
       $(this).find("ul").hide(); 
      }); 
      }); 
+0

我意識到有很多準備去插件的這個,正如我所說的已經有一個工作選項。這更多關於我理解我如何能夠做我想做的事情來做我想做的事情。有任何想法嗎? – 2010-05-13 17:01:43