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;を使用できます。これにより、要素がマウスイベントのターゲットになることはありませんが、イベントはまだ要素の親にバブルします。

は、だからあなたの場合には、あなたが使用することができます素晴らしいザッツ

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

MDN Reference