jquery display list items

Question

У меня есть два или более неупорядоченных списка с первым элементом списка в каждом видимом, а остальные скрыты.

Когда щелкнул первый список, он должен показать все остальные li ниже и скрыть любые другие лики, открытые в другой ul.

Возможно, я не могу показать это правильно.

Я не могу изменить имена классов из примера, который у меня есть, когда они сгенерированы внутри внутреннего кода ядра и используются для других элементов.

Спасибо за любую помощь.

http://jsfiddle.net/ukkpower/En7KV/4/

Answer 1

Попробуйте это:

$('ul').on('click','.maincat', 
      function(e){ 
       // prevents the default click action of the a element 
       e.preventDefault(); 

       // finds the sibling elements, and shows them if hidden, 
       // hides them if visible 
       $(this).siblings().toggle(); 

       // finds the closest ul ancestor of the clicked element 
       // finds the other ul siblings of that ancestor-ul 
       // finds the '.maincat' class element's siblings that are visible 
       // hides those visible elements 
       $(this) 
       .closest('ul') 
       .siblings('ul') 
       .find('.maincat') 
       .siblings('li:visible') 
       .hide(); 
      }); 

JS Fiddle demo.

---

Под редакцией добавить ссылки (ниже) и это примечание:

Пожалуйста, обратите внимание, что, по состоянию на JQuery 1.7, метод live() является устаревшим (и, как таковые, поддержка может, или более вероятно, будет отбрасываться). Для jQuery 1.7+ используйте метод on() (см. Ссылки ниже) и до 1.7 рекомендуется использовать метод delegate().

Наша рекомендация для этой заметки - документация по API для live(), см. Ссылки.

Обратите внимание

Ссылки:

• closest().
• delegate().
• e.preventDefault().
• find().
• hide().
• live().
• on().
• siblings().
• toggle().