JQuery - 返回默认函数

Question

通过单击“显示菜单”按钮，我有一个下拉菜单。当下拉菜单显示时，我点击“菜单 2”，它会显示一个子菜单。之后，我让下拉菜单和子菜单打开，然后我按下按钮，菜单关闭。

现在，我再次按下按钮，同时显示下拉菜单和子菜单。我只想显示下拉菜单。

请伸出援手。谢谢!

jsfiddle

JS

$(function() {
    $('.myButton').on("click", function (){
      $('#first-menu').toggleClass("action")
    });
        $('.subMenu').click(function (){
      $('#second-menu').addClass("action1")
    });
});

HTML

<div>
<button class="myButton">Show Menu</button>
</div>
<ul id="first-menu">
  <li>menu 1</li>
  <li class="subMenu">menu 2</li>
    <ul id="second-menu">
      <li>Sub Menu 1</li>
      <li>Sub Menu 2</li>
      <li>Sub Menu 3</li>
    </ul>
  <li>menu 3</li>
  <li>menu 4</li>
</ul>

CSS

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}
ul {
  padding: 10px;
  width: 100%;
}
#first-menu, #second-menu {
  position: absolute;
  left: -170px;
  transition: all 0.5s ease 0s;
}
.action {
  left: 0 !important;
}
.action1 {
  left:70px !important;
}

Answer 1

尝试在主节目上点击时添加删除类，第二个也使用切换:

 $('.myButton').on("click", function (){
      $('#first-menu').toggleClass("action");
      $('#second-menu').removeClass("action1")

    });
        $('.subMenu').click(function (){
      $('#second-menu').toggleClass("action1")
    });