JQuery Аккордеон - PullRequest
Новая
       7

JQuery Аккордеон

0 голосов
/ 13 мая 2010

Просто интересно, может ли кто-нибудь дать какой-нибудь базовый совет по аккордеону, который я пытаюсь упростить. Есть рабочая версия, но она кажется слишком сложной. Вот мой новый JS. 

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

Мой скрипт работает нормально. Но он показывает все дочерние элементы ul, когда любой родительский элемент li находится в подчинении, и скрывает все дочерние элементы ul, когда он не найден. Только не уверен, как я могу получить это к A.) Только. Покажи li> ul, когда этот конкретный li найден. И B.) Скрывайте показанный li> ul только тогда, когда другой находится над вами (не сам). Пример + объяснение было бы особенно полезно! Спасибо !!

1 Ответ

1 голос
/ 13 мая 2010

Почему вы не можете использовать 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', который находится внутри текущего 'li' 

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

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