Menu dropdown in html, css and js from mobile and desktop-CodePudding

i refer to this thread: JS using onclick event on li to display block

From desktop is ok but how do i do the same thing but that from the mobile you can touch the "disappearing" menu and make sure that it remains visible until the next touch?

I'm currently using this code here:

function dropdown() {
  document.getElementById("Menuitems").style.display = "block";
}

#dropdown ul {
  display: block;
  transition-duration: 1s;
}

#dropdown ul li {
  display: block;
  background-color: #212121;
  color: #ffffff;
}

#dropdown ul li ul {
  display: none;
}

#dropdown ul li:hover>ul {
  /*this is what the onclick event should do*/
  display: block;
}

<div id="dropdown">
  <ul>
    <li onclick="dropdown()"><a>Menu</a>
      <ul id="Menuitems">
        <li><a href="">item 1</a> </li>
        <li><a href="">item 2</a> </li>
        <li><a href="">item 3</a> </li>
      </ul>
    </li>
  </ul>
</div>

CodePudding user response：

I just added an active class onclick .. the active class toggles on every click. and just add the same hover effect to active class

function dropdown() {
  document.getElementById("Menuitems").classList.toggle("active");
}

#dropdown ul {
  display: block;
  transition-duration: 1s;
}

#dropdown ul li {
  display: block;
  background-color: #212121;
  color: #ffffff;
}

#dropdown ul li ul {
  display: none;
}

#dropdown ul li:hover>ul,
#dropdown ul li>ul.active{
  /*this is what the onclick event should do*/
  display: block;
}

<div id="dropdown">
  <ul>
    <li onclick="dropdown()"><a>Menu</a>
      <ul id="Menuitems">
        <li><a href="">item 1</a> </li>
        <li><a href="">item 2</a> </li>
        <li><a href="">item 3</a> </li>
      </ul>
    </li>
  </ul>
</div>

CodePudding user response：

Ok but the problem stil remain. How can i solve?

The code that i used is this:

function dropdown() {
  document.getElementById("Menuitems").classList.toggle("active");
}
#dropdown ul {
  display: block;
  transition-duration: 1s;
}

#dropdown ul li {
  display: block;
  background-color: #212121;
  color: #ffffff;
}

#dropdown ul li ul {
  display: none;
}

#dropdown ul li:hover>ul,
#dropdown ul li>ul.active{
  /*this is what the onclick event should do*/
  display: block;
}
<div id="dropdown">
  <ul>
    <li onclick="dropdown()"><a>Menu</a>
      <ul id="Menuitems">
        <li><a href="">item 1</a> </li>
        <li><a href="">item 2</a> </li>
        <li><a href="">item 3</a> </li>
      </ul>
    </li>
  </ul>
</div>