javascript - 使用 javascript 创建下拉菜单

Question

这已经在这里被问过很多次了，但我找不到适合我的代码的可理解的解决方案。

我想创建一个移动显示/隐藏下拉菜单。

我的代码是这样的:

<div>
   <a href="">Click this Link to collapse the subitems</a>
      <ul class="submenu">
         <li class="subitem">1</li>
         <li class="subitem">2</li>
         <li class="subitem">3</li>
         <li class="subitem">4</li>
      </ul>
   <a href="">Click this Link to collapse the subitems</a>
      <ul class="submenu">
         <li class="subitem">1</li>
         <li class="subitem">2</li>
         <li class="subitem">3</li>
         <li class="subitem">4</li>
      </ul>
   <a href="">Click this Link to collapse the subitems</a>
      <ul class="submenu">
         <li class="subitem">1</li>
         <li class="subitem">2</li>
         <li class="subitem">3</li>
         <li class="subitem">4</li>
      </ul>
</div>

子项将被隐藏。当我单击 a-Tag(“单击此链接...”)时，将显示下面的子项。请给我一个不改变代码本身的解决方案 - 这甚至可能吗？只有点击链接的子元素才会折叠。

有什么帮助吗？

Answer 1

$(div > a).on('click', function() {
  var child = $(this).child('ul.submenu');

  if ($(child).is(':hidden')) {
    $(child).show();
  }
  else {
    $(child).hide();
  }
});