jquery - 切换下拉菜单

Question

我正在尝试创建一个带有下拉列表的菜单，使用 jQuery 到 onclick 切换以将类从“隐藏”更改为“显示”。虽然我想不通。

这是我所拥有的：

<style type="text/css">
    nav ul li.hide ul {
        display: none;
    }
    nav ul li.show ul {
        display: block;
    }
</style>

<nav>
  <ul>
      <li class="hide">Home
        <ul>
          <li>Dropdown Link</li>
        </ul>
      </li>
 </ul>
</nav>

<script type="text/javascript">
  $(document).ready(function(){
      $('li').toggleClass('hide', 'show');
  });
</script>

Answer 1

我变了：

<script type="text/javascript">
  $(document).ready(function(){
      $('li').toggleClass('hide', 'show');
  });
</script>

对此：

<script type="text/javascript">
  $(document).ready(function(){
      $("li").click(function () {
      $(this).toggleClass("hide show");
   });
  });
</script>