jquery: ul, li родительское переключение нескольких дочерних дочерних элементов

Question

Мой главный вопрос заключается в следующем: как отобразить только первого подчиненного элемента ul или li при щелчке на родительском элементе.

например:

<ul> Grandparent
  <li> Child1 <li> Grandchild11</li></li>
  <li> Child2 <li>GrandChild21</li><li>grandchild22</li></li>
</ul>

, например, Iхотел бы что-то с эффектом

$('ul').click(function(){
  $('ul').children('first li').toggle();
});
$('li').click(function(){
  $('li').children('first li').toggle();
});

, означающим: когда я нажимаю ul, я вижу только первый дочерний узел (будут показаны child1 и child2, но не внуки).когда я нажимаю child1 или child2, я вижу соответствующего внука.grandchild не отображается при нажатии на grandparent, только при нажатии child1 или child2.

Я знаю, что заново изобретаю колесо какого-то предварительно кодированного решения, но любая помощь будет в значительной степени признательна!

Answer 1

Здесь необходимо выполнить 2 шага, сначала исправьте HTML-код, чтобы он был действительным (<li> должен быть в <ul> или <ol>), например:

<ul> 
    <li>Grandparent
        <ul>
          <li> Child1 
              <ul><li> Grandchild11</li></ul>
          </li>
          <li> Child2 
              <ul><li>GrandChild21</li><li>grandchild22</li></ul>
          </li>
        </ul>
    </li>
</ul>​

Затем нажмитеобработчик выглядит следующим образом:

$('li').click(function(e){
  $(this).children('ul').slideToggle();
  e.stopPropagation();
});​

Вы можете посмотреть демо здесь , здесь они вводят .stopPropagation() на event, переданном в click обработчик.Это предотвращает всплытие события click, заставляя родителя также переключать дочерние элементы под ними ... закомментируйте эту строку в демонстрации, чтобы увидеть некоторые очень нежелательные действия:)

О, и как Mvanупоминается в комментариях, используйте немного CSS, чтобы изначально скрыть детей, как это делает демонстрационная программа:

ul li ul { display: none; }​

Answer 2

Используйте селектор > .

Обратите внимание, что вложение li элементов не допускается. Используйте div или что-то еще внутри li.