jquery - 在 anchor 单击时显示/隐藏子 UL

Question

我正在 HTML 中创建一棵带有子节点的树...

当单击同一 LI 上的 A 标签时，我需要显示/隐藏 UL。

在以下示例中，当单击带有 3 的 A 标签时，包含 3.1 和 3.2 的 UL 应显示/隐藏。

$("a").on("click", function() {
  $("ul").toggle()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">1</a></li>
  <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>          
</ul>

注意:目前我在点击时使用“a”，但应该只有在同一 LI 上具有 UL 的 A 标签。

Answer 1

//bind only on the 'a's that have a sibling 'ul'
$("a").filter(function(){
    return ( $(this).siblings('ul').length > 0 );
}).on("click", function(e) {
    e.preventDefault();
    // hide sibling ul element (if it exists)
    $(this).siblings("ul").toggle();
});