how to close hamburger menu after click open-CodePudding

I have hamburger menu and added click to open a sub menu and after that struggling to close the sub-menu, please check the detailed code below. Thanks...!!

function myFunction() {
  document.getElementById("mob").style.display = "inline-flex";
  document.getElementById("mob").style.position = "absolute";
}

.hamburger {
  width: 35px;
  height: 5px;
  background-color: #f7941e;
  margin: 6px 0;
}

.mobile-menu {
  display: none;
}

.hamburger-container {
  cursor: pointer;
}

<div >
  <div  onclick="myFunction()">
    <div ></div>
    <div ></div>
    <div ></div>
    <div  id="mob">
      <ul >
        <li >Home</li>
        <li >Types Tours
          <div >
            <ul >
              <li>test-1</li>
              <li>test-2</li>
              <li>test-3</li>
            </ul>
          </div>
        </li>
        <li >The regions</li>
        <li >Instructors</li>
        <li >Questions / Answers</li>
        <li >Contacts</li>
      </ul>
    </div>
  </div>
</div>

CodePudding user response：

Toggle the class active on the #mob element, adding the CSS attributes you added in your function.

function myFunction() {
  const toggle_btn = document.getElementById('mob');
  toggle_btn.classList.toggle('active');
}

.hamburger {
  width: 35px;
  height: 5px;
  background-color: #f7941e;
  margin: 6px 0;
}

.mobile-menu {
  display: none;
}

.hamburger-container {
  cursor: pointer;
}

#mob.active {
  display: inline-flex;
  position: absolute;
}

<div >
  <div  onclick="myFunction()">
    <div ></div>
    <div ></div>
    <div ></div>
    <div  id="mob">
      <ul >
        <li >Home</li>
        <li >Types Tours
          <div >
            <ul >
              <li>test-1</li>
              <li>test-2</li>
              <li>test-3</li>
            </ul>
          </div>
        </li>
        <li >The regions</li>
        <li >Instructors</li>
        <li >Questions / Answers</li>
        <li >Contacts</li>
      </ul>
    </div>
  </div>
</div>

CodePudding user response：

Create a hidden class and use toggle function to add or remove it

const myFunction = () => document.getElementById("mob").classList.toggle("hidden");

.hamburger {
  width: 35px;
  height: 5px;
  background-color: #f7941e;
  margin: 6px 0;
}

.mobile-menu {
  display: inline-flex;
  position: absolute;
}

.mobile-menu.hidden {
  display: none;
}

.hamburger-container {
  cursor: pointer;
}

<div >
  <div  onclick="myFunction()">
    <div ></div>
    <div ></div>
    <div ></div>
    <div  id="mob">
      <ul >
        <li >Home</li>
        <li >Types Tours
          <div >
            <ul >
              <li>test-1</li>
              <li>test-2</li>
              <li>test-3</li>
            </ul>
          </div>
        </li>
        <li >The regions</li>
        <li >Instructors</li>
        <li >Questions / Answers</li>
        <li >Contacts</li>
      </ul>
    </div>
  </div>
</div>