Jquery 切换下拉菜单

我试图创建一个带有droplist的菜单，使用jQuery和onclick切换将类从“hide”更改为“show”。虽然我不明白

以下是我所拥有的：

<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>

导航ul li.隐藏ul{
显示：无；
}
海军保险公司{
显示：块；
}

主页

下拉链接



$（文档）.ready（函数（）{
$（'li'）.toggleClass（'hide'，'show'）；
});

我改变了：

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

$（文档）.ready（函数（）{
$（'li'）.toggleClass（'hide'，'show'）；
});

为此：

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

$（文档）.ready（函数（）{
$（“li”）。单击（函数（）{
$（this.toggleClass（“隐藏显示”）；
});
});