jquery - jQuery-返回默认功能

通过单击“显示菜单”按钮，我有一个下拉菜单。当下拉列表显示时，我单击“菜单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;
}

最佳答案

尝试在主演出上点击时添加remove类，第二个也使用切换：

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

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

关于jquery - jQuery-返回默认功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58681275/