Функция наведения для аккордеона

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/

У меня есть две проблемы с этим ... При наведении курсора убирается слайд-вверх / вниз, когда вы нажимаете одну из ссылок под ярусом уровня 2 Я хотел бы, чтобы это оставалось скользящим, поскольку кто-то парит вложенные li. Поэтому слайд должен происходить только при наведении на элементы tier_1. Также я бы хотел при наведении курсора добавить «активный» класс к элементу в ссылках tier_1. Поэтому [a class = "enviro" ..] при наведении курсора становится [a class = "enviro active"]. Затем он удаляется при наведении одного из других элементов уровня 1. Таким образом, красивый цветной значок может оставаться видимым, пока кто-то смотрит на вложенные элементы.

Даже не уверен, что все это возможно при наведении, но я подумал, если кто-нибудь узнает, как это будет здесь.

Answer 1

Я думаю, что вы, вероятно, хотите иметь обработчик mouseout для ваших тем DIV, который перемещает все вложенные UL и обработчик mouseover для каждого якоря tier_1, который закрывает другие вложенные UL и открывает его. вложенная ул. Таким образом, панели закрываются только тогда, когда вы переключаетесь на другую панель или полностью выходите из раздела div. Вы можете опустить mouseout, если хотите, чтобы последний выбор в темах DIV оставался выбранным.

$(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; 
  }); 
});