扩大父李点击孩子UL

我有以下结构：扩大父李点击孩子UL

<div class="Downloadscontainer"> 
<ul> 
    <li>level 1</li> 
    <li><a href="#">level 1</a> 
     <ul> 
      <li>level 2</li> 
      <li>level 2</li> 
      <li><a href="#">some page</a> 
      <ul> 
       <li>level 2</li> 
       <li>level 2</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul>

，我试图以其父李点击显示UL，以下是我的jQuery

$(document).ready(function() { 
    $(".Downloadscontainer ul li ul").css("display", "none"); 
    $(".Downloadscontainer li").each(function() { 
     $(this).click(function() { 
      if ($(this).children('ul').length > 0) { 
       $('.Downloadscontainer li ul').toggle(); 
      } 
     }); 
    }); 
});

所以，如果我点击1级LI它显示UL，然后如果我点击2级LI其中有UL以及它关闭1级LI的UL;我希望它继续打开子女UL。我怎样才能获得这个功能？

link to fiddle

来源

2014-10-17 Umar Khan

http://jsfiddle.net/TrueBlueAussie/ot0kxs0z/2/

$(".Downloadscontainer li").click(function (e) { 
    e.stopPropagation(); 
    $(this).children('ul').toggle(); 
});

笔记：

你不需要each到处理程序附加到jQuery的多个元素。
您只需要停止将子点击传播到DOM中的父LI即可
由于@George建议您最好附加到锚定点击。

以锚的方法，我建议以下为DOM变化友好：

http://jsfiddle.net/TrueBlueAussie/ot0kxs0z/5/

$(".Downloadscontainer a").click(function (e) { 
    e.preventDefault(); 
    $(this).closest('li').children('ul').toggle(); 
});

注：

它找到最接近LI到锚点击，然后钻到子女UL s（而不是通过next导航，这需要一个已知的安排。
preventDefault将停止空白书签链接（在您的示例中为href="#"）从滚动到页面顶部。如果他们是完整的链接，他们会阻止他们浏览，所以如果您添加页面链接，您可能需要额外的检查。

例如，你可以检查，如果该链接是空白的书签，并允许各个环节正常闪光：

http://jsfiddle.net/TrueBlueAussie/ot0kxs0z/7/

$(".Downloadscontainer a").click(function (e) { 
    if ($(this).attr("href") == '#') { 
     e.preventDefault(); 
     $(this).closest('li').children('ul').toggle(); 
    } 
});

这拨弄具有外部链接到谷歌，还有#链接。

来源

2014-10-17 10:42:14

感谢你给予的帮助:)现在我对它有了更好的理解。 – 2014-10-17 11:03:06

如何事件处理程序连接至锚？：

$(".Downloadscontainer li a").click(function (e) { 
    e.preventDefault(); 
    $(this).next('ul').toggle(); 
});

JSFiddle

记住，防止您的锚的默认操作，以免被重定向，如果它有链接。
.each()循环对许多jQuery方法来说并不是必需的，事件处理绑定器方法如.click(),.change(),.keydown()等包括在内。

来源

2014-10-17 10:41:26 George

锚点是书签链接，所以不会重定向，但是您的解决方案将避免浏览器跳转到页面顶部，因此应添加到任何答案中。 +1 – 2014-10-17 10:49:25

当然，我不知道这段代码可能会在哪里。无论你做什么都好。（： – George 2014-10-17 10:52:21

感谢@George为你提供帮助:)我想接受这两个答案，但不幸的是只能接受一个:( – 2014-10-17 11:06:50

我想这和它的更迭，你可以用它

$(".main-menu li").click(function (e) { 
    e.stopPropagation(); 
    $(this).children('ul').slideToggle().css("padding-left", "30px"); 
});

我添加填充左每个孩子UL一些额外的feture，这样我们就可以明白/ desfine哪一个扩展。

来源

2017-09-16 16:24:37 Rashed

扩大父李点击孩子UL

回答

相关问题