手風琴的懸停功能

Question

到目前爲止，你們對我的這種小小工作非常有幫助。我有一個進一步的要求：

此標記：

  <div id="themes"> 
      <h2>Research Themes</h2> 
      <ul> 
       <li class="tier_1"><a class="enviro" href="">Learn about our approach to the <strong>environment</strong></a> 
       <ul class="tier_2 hide"> 
        <li><a href=""><em>How we are tying this all together</em></a></li> 
        <li><a href="off.html"><strong>Project:</strong> Solor Powered Biofactories</a></li> 
        <li><a href=""><strong>Project:</strong> Cleaning Water with Nature</a></li> 
        <li><a href=""><strong>Project:</strong> Higher Efficiency Solar Technology</a></li> 
       </ul> 
       </li> 
       <li class="tier_1"><a class="health" href="">Learn about our approach to <strong>human health</strong></a> 
       <ul class="tier_2 hide"> 
        <li><a href="">Project name numero uno goes here</a></li> 
        <li><a href="">Project name numero dos goes here</a></li> 
        <li><a href="">Project name numero tres goes here</a></li> 
       </ul> 
       </li> 
       <li class="tier_1"><a class="defense" href="">Learn about our approach to <strong>national defense</strong></a> 
       <ul class="tier_2 hide"> 
        <li><a href="">Project name numero uno goes here</a></li> 
        <li><a href="">Project name numero dos goes here</a></li> 
        <li><a href="">Project name numero tres goes here</a></li> 
       </ul> 
       </li> 
      </ul> 
      </div><!-- // end themes --> 

這jQuery的：

$(function(){ 
    $(".tier_1 > a").hover(function() { 
    var currentList = jQuery(this).parents('li').find('.tier_2'); 
    $(currentList).slideToggle(); 
    jQuery(this).parents('ul').find('.tier_2').not(currentList).slideUp(); 
    return false; 
    }); 
}); 

創建這個漂亮的「主題」滑塊，你可以看到這個頁面的右列工作： http://clients.pixelbleed.net/biodesign/

我遇到了兩個問題......當您點擊tier_2 ul下的其中一個鏈接時，懸停會縮回slideUp/down。我希望它能夠在有人懸停嵌套李的時候繼續滑出。所以幻燈片應該只發生在爲tier_1元素懸停的情況下。另外，我希望在懸停時將「活動」類添加到tier_1鏈接上的a元素。所以[a class =「enviro」..]會在懸停時成爲[a class =「enviro active」]。當其他tier_1項目之一被徘徊時，這將被刪除。這樣，當有人查看嵌套元素時，漂亮的顏色圖標可以保持可見。

甚至不能確定所有可能的懸停，但我想如果有人會知道它會在這裏的一種方式。

Answer 1

我想你可能想對你的主題一個mouseout處理DIV，其中上滑所有嵌套ULS和一個mouseover處理每個tier_1錨是關閉其他嵌套的ULS和幻燈片打開嵌套在UL。這樣，只有當您切換到不同的面板或完全脫離了div div時，纔會關閉面板。如果您希望在主題DIV中保持選定狀態時的最後選擇，則可以省略mouseout。

$(function(){ 
    $('div.themes').mouseout(function() { 
     $('.tier_2:visible').slideUp(); 
     $(this).find('a.active').removeClass('active'); 
    }); 
    $(".tier_1 > a").mouseover(function() { 
    var $this = $(this); 
    $this.closest('div').find('a.active').not($this).removeClass('active'); 
    $this.addClass('active'); 
    var currentList = $this.parents('li').find('.tier_2'); 
    $(currentList).not(':visible').slideDown(); 
    $('.tier_2:visible').not(currentList).slideUp(); 
    return false; 
    }); 
});