移动下拉菜单不会关闭JavaScript

Question

I am trying to have a hamburger menu on my mobile website.

When viewed on a mobile device, The menu opens on a click but will not collapse on a click once the menu is open. -THIS IS MY ISSUE

This is basic HTML for my issue.

I am using magento 1.9.2.3

The php code are the "toplinks". These do not need to be working to solve this problem.

HTML

<div class="mobile-links">

        <div id="dropdown" onClick="myFunction()">
        <button class="dropbtn">
        <span><img src="http://www.smockedoverstocks.net/skin/frontend/lee/default/images/hamburger-menu.png"/></span></button>
        <div class="dropdown-content">
        <div class="quick-access five columns omega">
        <?php echo $this->getChildHtml('topLinks') ?>
        </div>
        </div>
        </div>
</div>

---

Javascript that controls the menu:

        <script language="javascript">
 /* When the user clicks on the button, 
 toggle between hiding and showing the dropdown content */
 function myFunction(ev) {
document.getElementById("dropdown").classList.toggle(show);
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
  var openDropdown = dropdowns[i];
  if (openDropdown.classList.contains('show')) {
  Dropdown.classList.remove('show')};

  }
}
}
}
</script>

---

CSS for the menu:

.mobile-links .dropdown {
  position:relative;
  display:inline-block;
  padding:2px 13px 0px;
}

.mobile-links .dropdown-content{
  display:none;
  position:absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 5px 12px;
  z-index: 1;
}

#dropdown:hover .dropdown-content,
#dropdown.show .dropdown-content {
display:block;
}

Any help would be appreciated.

Thanks

Answer 1

First,

   <div class="dropdown">
      <onclick="myFunction()" class="dropbtn">

is incorrect format. onClick should be inline with your <div> like so,

 <div class="dropdown" onClick="myFunction()">

or on a different user interface element. Next,

document.getElementById("myDropdown").classList.toggle("show");

should be changed to,

document.getElementById("myDropdown").classList.toggle();

Set the initial state of myDropdown to hide() . For example,

  $(document).ready(function() {
      $('#myDropdown').hide();
  }

This specifies an element to perform an action after the page has loaded. You could set it entirely with css by giving a display property of none and setting a trigger to change the display property to block on click or hover . Hope this helps

Answer 2

Have at this adapted live example: Is this the behaviour you were looking to achieve?

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction(ev) { document.getElementById("dropdown").classList.toggle('show'); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.collapse('show'); } } } } 

 .mobile-links .dropdown { position:relative; display:inline-block; padding:2px 13px 0px; } .mobile-links .dropdown-content{ display:none; position:absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 5px 12px; z-index: 1; } #dropdown:hover .dropdown-content, #dropdown.show .dropdown-content { display:block; } 

 <div class="mobile-links"> <div id="dropdown" onclick="myFunction()"> <button class="dropbtn"> <span><img src="http://www.smockedoverstocks.net/skin/frontend/lee/default/images/hamburger-menu.png"/></span></button> <div class="dropdown-content"> <div class="quick-access five columns omega"> content </div> </div> </div> </div>