手风琴的悬停功能

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 下的链接之一时，悬停会缩回上滑/下滑。当有人在嵌套的 li 盘旋时，我希望它保持滑出状态。所以幻灯片应该只发生在 tier_1 元素的悬停上。我还想在悬停时向 tier_1 链接上的 a 元素添加一个“活动”类。所以 [a class="enviro"..] 在悬停时会变成 [a class="enviro active"]。然后，当悬停其他 tier_1 项目之一时，将删除它。这样，当有人查看嵌套元素时，漂亮的颜色图标可以保持可见。

甚至不确定悬停所有可能的情况，但我想如果有人知道它会在这里的方式。

Answer 1

我认为您可能希望在主题 DIV 上有一个 mouseout 处理程序，它会向上滑动所有嵌套的 uls，并为每个 tier_1 锚点设置一个 mouseover 处理程序，以关闭其他嵌套的 uls 并滑动打开它嵌套 ul。这样，当您切换到不同的面板或完全退出它们的 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; 
  }); 
});