javascript 汉堡菜单并不总是触发 javascript

Question

我有一个简单的移动/小屏幕汉堡包菜单，其中包含一个用于图标的 div 和一个用于实际按钮的 div。如果您单击该图标，使菜单展开/显示的 javascript 不会触发。我环顾四周，大多数答案都说要更改 javascript，因此单击图标也会触发它，但我一直无法让它工作。

HTML:

<div onclick="myFunction(); hamburger(this)" class="dropbtn dropdown">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<div id="myDropdown" class="dropdown-content">
      <%= link_to "Home Page", root_url %></a>
      <%= link_to "Create a list", new_list_url %></a>
      <% if current_user %>
        <%= link_to 'View your lists', "/lists/#{current_user.id}" %>
        Signed in as <%= current_user.email %>. <%= link_to "Log out", session_path("current"), :method => :delete %>
      <% else %>
        <%= link_to "Log in", new_session_path , {:class=>"nav_left_1"} %> <%= link_to "Sign up", new_user_path , {:class=>"nav_left_2"} %>
      <% end %>
      </a>
    </div>

CSS:

.dropbtn  {
   display: none;
 }

 .dropdown-content {
   display: none;
 }

 @media screen and (max-width: 1010px) and (min-width: 0px) {

 nav a {
   display: none;
 }
 .dropbtn {
   display: inline-block;
   vertical-align: top;
   margin-top: 19px;
 }
 .hamburger {
     display: inline-block;
     cursor: pointer;
 }

 .bar1, .bar2, .bar3 {
     width: 35px;
     height: 5px;
     background-color: #333;
     margin: 6px 0;
     transition: 0.4s;
     z-index: 70;
 }

 .change .bar1 {
     -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
     transform: rotate(-45deg) translate(-9px, 6px) ;
 }

 .change .bar2 {
     opacity: 0;
 }

 .change .bar3 {
     -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
     transform: rotate(45deg) translate(-8px, -8px) ;
 }
 .dropbtn {
     background-color: #4281A4;
     color: white;
     padding: 10px;
     font-size: 16px;
     float: right;
     border: none;
     cursor: pointer;
     margin-right: 14px;
     z-index: 70;

 }



 .dropdown {
     position: relative;
     display: inline-block;
 }

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

 .dropdown-content a {
     color: black;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
 }

 .dropdown-content a:hover {background-color: #f1f1f1}

 .show {display:block;}
 }

Javascript:

function myFunction() {
  document.getElementById("myDropdown").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.remove('show');
    }
  }
}
}

function hamburger(x) {
    x.classList.toggle("change");
  }

Answer 1

解决这个问题的一种方法实际上是使用 CSS。在现代浏览器中，您可以在元素上使用属性/值 pointer-events: none;，这将确保元素永远不会成为鼠标事件的目标，但事件仍会冒泡到元素的 parent 。

所以在你的情况下，你可以使用:

 .bar1, .bar2, .bar3 {
     width: 35px;
     height: 5px;
     background-color: #333;
     margin: 6px 0;
     transition: 0.4s;
     z-index: 70;
     pointer-events: none;
 }

MDN Reference