javascript漢堡包菜單並不總是觸發javascript

我有一個簡單的移動/小屏幕漢堡包菜單，它包含一個用於圖標的div和用於實際按鈕的div。如果您點擊該圖標，JavaScript將使菜單展開/顯示不會啓動。我環顧四周，大部分答案都說要改變javascript，所以點擊圖標也會觸發它，但是無論我嘗試什麼，我都無法讓它工作。得益於先進的得到任何幫助，這個工作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"); 
    }

來源

2017-08-23 firewire167

一種方法實際上就是使用CSS 。在現代瀏覽器中，您可以在元素上使用屬性/值pointer-events: none;，這將確保該元素永遠不是鼠標事件的目標，但該事件仍會冒泡到元素的父項。

所以你的情況，你可以使用：

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

MDN Reference

來源

2017-08-23 16:06:30 Peter

那真棒，謝謝你這麼多，我從來沒有聽說過之前。 – firewire167

javascript漢堡包菜單並不總是觸發javascript

回答

相關問題