在父母李的点击上展开孩子ul [英] expand child ul on click of parent li

问题描述

我有以下结构：

 < div class =Downloadscontainer> 
< ul> 
< li> 1级< / li> 
< li>< a href =＃> 1级< / a> 
< ul> 
< li> 2级< / li> 
< li> 2级< / li> 
< li>< a href =＃>某页面< / a> 
< ul> 
< li> 2级< / li> 
< li> 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 ，然后如果点击 UL> <2> < LI code>以及关闭1级 LI 的 UL ;我希望它继续打开子 UL 。我怎样才能获得这个功能？

链接到小提琴

解决方案

http：// jsfiddle .net / TrueBlueAussie / ot0kxs0z / 2 / $ b

  $（。Downloadscontainer li）。click（function e）{
 e.stopPropagation（）; 
 $（this）.children（'ul'）。toggle（）; 
}）; 
  

注意：

• 您不需要每个将处理程序附加到jQuery中的多个元素。


• 只需停止子单击作为 @George 建议您最好附加锚定点击。

采用锚定方法时，我建议将以下内容作为 DOM友好更改：

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

  $（。Downloadscontainer a）。click（function（e）{
 e.preventDefault（）; 
 $（this）.closest（'li'）。children（'ul'）。toggle（）; 
}）; 
  

注意：

• 它会找到最接近的 LI ，然后钻到子元素 UL s（而不是导航通过下一步，这需要一个已知的安排。


• preventDefault 将停止空白的书签链接（在你的例子中为 href =＃）从页面顶部滚动到页面顶部，如果他们是完整的链接，他们会阻止他们浏览，所以你可能需要如果您添加页面链接，则需要进行额外的检查。

例如，您可以检查链接是否为空白书签并允许其他链接正常触发：

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

  $（。Downloadscontainer a）。click（function（e）{ 
 if（$（this）.attr（href）=='＃'）{
 e.preventDefault（）; 
 $（this）.closest（'li'）。儿童（'U L）切换（）; 
} 
}）; 
  

这个小提琴有一个到Google的外部链接，以及＃链接。

I have the following structure:

<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>

And i am trying to display ul on click of its parent li, following is my 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();
            }
        });
    });
});

So if I click on level 1 LI it displays the UL and then if I click on level 2 LI which have UL as well it close down the UL of level 1 LI; I would like it to keep opening the child UL. How can I obtain this functionality ?

link to fiddle

解决方案

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

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

notes:

• You do not need to each to attach handlers to multiple elements in jQuery.
• You just need to stop the child click propagating to the parent LI in DOM
• As @George suggests you may be better off attaching to the anchor click.

Taking the anchor approach I would suggest the following as DOM-change friendly:

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

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

Notes:

• It finds the closest LI to the anchor clicked, then drills down to the child ULs (rather than navigate via next, which required a known arrangement.
• preventDefault will stop blank bookmark links (href="#" in your example) from scrolling to the top of the page. If they were full links they would stop them navigating, so you may need an additional check if you add page links.

e.g you can check if the link is a blank bookmark and allow other links to fire normally:

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

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

This fiddle has an external link to Google, as well as the # links.

这篇关于在父母李的点击上展开孩子ul的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！