jQuery Вложенный ul с родительским ребенком li, show hide - PullRequest
Новая
       12

jQuery Вложенный ul с родительским ребенком li, show hide

3 голосов
/ 10 февраля 2011

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

Единственный другой улов - это то, что я хочу удалить href для родительского li.

Я достиг большей части этого, за исключением того, что мои вложенные ul li наследуют вышеупомянутые действия, хотя я нацеливаюсь на родительский класс li. Я знаю, что мне не хватает чего-то фундаментального. Заранее спасибо

HTML 

<ul>
  <li.expanded><a href="foo">Lorum</a>
    <ul>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
    </ul>
  </li>
  <li.expanded><a href="foo">Lorum</a>
    <ul>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
    </ul>
  </li>
  <li.expanded><a href="foo">Lorum</a>
    <ul>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
    </ul>
  </li>
  <li.expanded><a href="foo">Lorum</a>
    <ul>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
    </ul>
  </li>
</ul>

JQuery 

$(document).ready(function() {
    $('ul ul').hide();
    $('ul li.expanded a').removeAttr("href");
    $('ul li').click(function(){
      $('ul ul').hide('slow');
      $(this).find('ul').toggle('slow');



    });
 });
;

Ответы [ 2 ]

4 голосов
/ 10 февраля 2011

Были некоторые опечатки в HTML, я изменил li.leaf на class = 'leaf' У меня есть изменения в сценарии тоже. Чтобы скрыть все CSS суб-UL используется. Смотрите это в действии: http://jsfiddle.net/theuideveloper/DFHWd/4/ Надеюсь, это поможет вам. Удачного кодирования! -theUiDeveloper

HTML 

<ul id="master">
  <li class="expanded"><a href="foo">Lorum1</a>
    <ul>
      <li class="leaf"><a href="foo">Lorum</a></li>
      <li class="leaf"><a href="foo">Lorum</a></li>
      <li class="leaf"><a href="foo">Lorum</a></li>
      <li class="leaf"><a href="foo">Lorum</a></li>
    </ul>
  </li>
  <li class="expanded"><a href="foo">Lorum2</a>
    <ul>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
    </ul>
  </li>
  <li class="expanded"><a href="foo">Lorum3</a>
    <ul>
      <li class="leaf"><a href="foo">Lorum</a></li>
      <li class="leaf"><a href="foo">Lorum</a></li>
      <li class="leaf"><a href="foo">Lorum</a></li>
      <li class="leaf"><a href="foo">Lorum</a></li>
    </ul>
  </li>
  <li class="expanded"><a href="foo">Lorum4</a>
    <ul>
      <li class="leaf"><a href="foo">Lorum</a></li>
      <li class="leaf"><a href="foo">Lorum</a></li>
      <li class="leaf"><a href="foo">Lorum</a></li>
      <li class="leaf"><a href="foo">Lorum</a></li>
    </ul>
  </li>
</ul>

CSS 

ul#master ul{
display:none;
}

JQuery 

 $(document).ready(function() {
            $('ul li.expanded a').each(function(i){
            var subUl = $(this).parent().find('ul'); //Get the sub ul.
            $(this).bind('click',function(e){
                    e.preventDefault(); // Prevent the default action of the link
                    $('.expanded ul').hide(); // hide all the other ULs
                    subUl.toggle();
                }) ;   
            });
        });
2 голосов
/ 10 февраля 2011

Вы можете изменить свой jQuery следующим образом: 

$(document).ready(function() {
    $('ul ul').hide();
    $('ul li.expanded a').removeAttr("href");
    $('ul li.expanded > a').click(function(event) {
        $('ul ul').hide('slow');
        $(this).parent().find('ul').toggle('slow');
    });
});

Проблема заключалась в том, что дочерние элементы целевого li были всплывающими их click событие вверх, вызывая li.expanded обработчик событий клика.Я изменил селектор на целевой a непосредственно под li с классом expanded.

Вот рабочий пример: http://jsfiddle.net/andrewwhitaker/ybVFj/

Кроме того, ваш HTML должен выглядетькак то так: 

<ul>
    <li class="expanded"><a href="foo">Lorum</a>
        <ul>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
        </ul>
    </li>
    <li class="expanded"><a href="foo">Lorum</a>
        <ul>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
        </ul>
    </li>
    <li class="expanded"><a href="foo">Lorum</a>
        <ul>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
        </ul>
    </li>
    <li class="expanded"><a href="foo">Lorum</a>
        <ul>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
        </ul>
    </li>
</ul>
...