Question

我正在尝试创建一个简单的手风琴菜单，其中嵌套在li中的ul被隐藏，直到单击父li，如果暴露则首先隐藏所有其他嵌套的ul，然后暴露该li的嵌套ul。

唯一的另一个问题是我想删除父li的href。

我已经实现了大部分这个，除非我的嵌套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');



    });
 });
;

Answer 1

html中有一些拼写错误，我将li.leaf更改为class ='leaf'。我的脚本也有变化。隐藏所有子ul的css被使用。看到它的实际应用：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();
                }) ;   
            });
        });

Answer 2

您可以按如下方式更改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的子元素是bubbling他们的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>

jQuery嵌套ul与li的父子，show hide

2 个答案: