包含<a>标签的层次结构或嵌套列表上的Jquery

Question

您将如何为包含<a>标记的以下列表正确编写jquery 代码.我有两个问题.

1. 当我单击父列表项以显示子项时,父项将消失,并简单地替换为同一行上的缩进子项.

2. 有些相关,我可以出于某种原因点击"1""2""3"和"4"的最后一个元素,导致列表实际上消失.我该如何解决这个问题？

HTML:

<div class="main_list">
   <ul>
     <li><a href="#">1.</a>
       <ul>
         <li><a href="#">1.1</a>
           <ul>
             <li><a href="#">1.1.1</a></li>
           </ul>
         </li>
       </ul>
     <li><a href="#">2.</a></li>
     <li><a href="#">3.</a>
       <ul>
         <li><a href="#">3.1</a></li>
         <li><a href="#">3.2</a></li>
       </ul>
     <li><a href="#">4.</a>
       <ul>
         <li><a href="#">4.1</a>
           <ul>
             <li><a href="#">4.1.1 </a></li>
             <li><a href="#">4.1.2 </a></li>
           </ul>
         </li>
       </ul>
     </li>
   </ul>
</div>

JQUERY:

$(document).ready(function(){

// only show top level elements to begin
$("ul ul").hide();


$("li").click(function(){
    $(this).children().toggle(500);
    return false;
});
});

Answer 1

使用children("ul")仅切换ul父项的孩子li.否则,您将切换父项,<a href="#">1.</a>也是以下项的子项li:

$("li").click(function(){
    $(this).children("ul").toggle(500);
    return false;
});

演示.