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")
    });