Question

我有以下标记：

<a href="#" class="Menu">Menu</a>
<ul>
  <li><a href="#">Home</a></li>
  <li>
    <a href="#">Content</a>
    <ul>
      <li><a href="#">Files</a></li>
      <li><a href="#">Posts</a></li>
    </ul>
  </li>  
  <li><a href="#">Shop</a></li>  
</ul>

1 - 当点击第一个锚点（class =“Menu”）时，我需要切换父UL的可见性

2 - 我还需要在单击其上方的锚点时切换每个子UL的可见性

如何使用JQuery执行此操作？

谢谢你，米格尔

Answer 1

jQuery(function(){
    $('a[href="#"]').click(function(){
        $(this).next('ul').toggle()
    })
})

Answer 2

使用切换方法只是使用jquery隐藏/显示元素

 $('.target').toggle();

Answer 3

@Arun P Johny对Jquery有正确的实现，但如果你有兴趣，这是javascript方法

function functionName(){
     document.getElementById("outerList").style.visibility = "visible";
}

您的html已修改

    <a onclick="functionName(); return false;" href="#" class="Menu">Menu</a>
    <ul id="outerList" style="visibility:hidden">
      <li><a href="#">Home</a></li>
      <li>
        <a href="#">Content</a>
        <ul>
          <li><a href="#">Files</a></li>
          <li><a href="#">Posts</a></li>
        </ul>
      </li>  
      <li><a href="#">Shop</a></li>  
    </ul>

切换元素的可见性

3 个答案: