ドロップダウンメニューが表示されない

Question

下記のドロップダウンメニューコードを使用しています。メニューの画像が正常に使用された場合、コードは正常に機能しました。ただし、ブラウザウィンドウのサイズを変更しても（レスポンシブウェブデザイン）、メニューアイコンを右に流すために、ドロップダウンメニューを相対的に配置したいと考えています。だからdiv要素に画像要素をラップして、絶対属性と相対属性を使用して配置することができました。しかし、div要素にイメージをラップすると、JavaScriptは何とか動作を停止します。ドロップダウンメニューは表示されません。

HTML

Javascript 

<script> 
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */ 
function myFunction() { 
    document.getElementById("myDropdown").style="display:block"; 
} 

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

    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     if (openDropdown.style="display:block") { 
     openDropdown.style="display:none"; 
     } 
    } 
    } 
} 
</script> 

Inside the body 

<div class="header"> 
    <h1 class="title">Hello </h1> 
    <div class="dragon-logo"> 
     <img id="dragon-img" src="pathtomascot.svg" /> 
    </div> 
    <div class="menu"> 
    <img onclick="myFunction()" src="pathtomenuicon.svg"> 
     <div id="myDropdown" class="dropdown-content"> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Link 3</a> 
     </div> 
    </div> 
</div> 

CSSごwindow.onclickハンドラで

/*For the menu icon*/ 
.menu { 
display: block; 
position: absolute; 
z-index: 0; 
height:55px; /* 150/640 */ 
width:55px;/*150/1536*/ 
top: 2.5%; 
right: 10.0208333333%; 
float: right; 
cursor: pointer; 
} 

/* Dropdown button on hover & focus */ 
.menu:hover, .menu:focus { 
    background-color: #3e8e41; 
} 

/* Dropdown Content (Hidden by Default) */ 
.dropdown-content { 
    display: none; 
    position: absolute; 
    margin-top: 
    margin-left: 69%; 
    background-color: #f9f9f9; 
    min-width: 11%; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 2; 
} 

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

/* Change color of dropdown links on hover */ 
.dropdown-content a:hover {background-color: #f1f1f1} 

Answer 1

、あなたの代わりにあなたの実際のクリックをトリガーする画像の.menuのクリックを無視するハンドラを設定しています。したがって窓。

/*For the menu icon*/ 
 

 
.menu { 
 
    display: block; 
 
    position: absolute; 
 
    z-index: 0; 
 
    height: 55px; 
 
    /* 150/640 */ 
 
    width: 55px; 
 
    /*150/1536*/ 
 
    top: 2.5%; 
 
    right: 10.0208333333%; 
 
    float: right; 
 
    cursor: pointer; 
 
} 
 

 
#menu_img{ 
 
width:50px; 
 
height:50px; 
 
} 
 
/* Dropdown button on hover & focus */ 
 

 
.menu:hover, 
 
.menu:focus { 
 
    background-color: #3e8e41; 
 
} 
 

 

 
/* Dropdown Content (Hidden by Default) */ 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    margin-top: margin-left: 69%; 
 
    background-color: #f9f9f9; 
 
    min-width: 11%; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 2; 
 
} 
 

 

 
/* Links inside the dropdown */ 
 

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

 

 
/* Change color of dropdown links on hover */ 
 

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

<script> 
 
    /* When the user clicks on the button, 
 
    toggle between hiding and showing the dropdown content */ 
 
    function myFunction() { 
 
    document.getElementById("myDropdown").style = "display:block"; 
 
    } 
 

 

 
    // Close the dropdown if the user clicks outside of it 
 
    window.onclick = function(event) { 
 
    if (!event.target.matches('#menu_img')) { 
 
     var dropdowns = document.getElementsByClassName("dropdown-content"); 
 
     var i; 
 
     for (i = 0; i < dropdowns.length; i++) { 
 
     var openDropdown = dropdowns[i]; 
 
     if (openDropdown.style = "display:block") { 
 
      openDropdown.style = "display:none"; 
 
     } 
 
     } 
 
    } 
 
    } 
 
</script> 
 

 
Inside the body 
 

 
<div class="header"> 
 
    <h1 class="title">Hello </h1> 
 
    <div class="dragon-logo"> 
 
    <img id="dragon-img" src="pathtomascot.svg" /> 
 
    </div> 
 
    <div class="menu"> 
 
    <img id="menu_img" onclick="myFunction()" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRglT3Ib_vLAUHw92-ShYB4h7S0meWdH5l56XM1v4hdoJw2PCTdFg"> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </div> 
 
</div>

以下のスニペット

if (!event.target.matches('#menu_img')) 

に

あなたのimgにIDを追加しますが、この

if (!event.target.matches('.menu')) 

をmenu_imgと 変更を命名しました

Answer 2

あなたの問題は、あなたのevent.targetがいつも期待しているとは限りません。その結果、window.onclick関数は、ドロップダウンメニューを開いてmyFunction()を否定すると直ちに実行されます。

私がしたことは、ドロップダウンメニューを閉じたくないすべての要素に新しいクラスdropdown-openを追加することでした。あなたはmenuの代わりにそのクラスをチェックすると動作します。

希望に役立ちます。

<div class="header"> 
    <h1 class="title">Hello </h1> 
    <div class="dragon-logo"> 
     <img id="dragon-img" src="pathtomascot.svg" /> 
    </div> 
    <div class="menu dropdown-open"> 
     <img onclick="myFunction()" src="pathtomenuicon.svg" class="dropdown-open"> 
     <div id="myDropdown" class="dropdown-content dropdown-open"> 
      <a href="#">Link 1</a> 
      <a href="#">Link 2</a> 
      <a href="#">Link 3</a> 
     </div> 
    </div> 
</div> 

<script> 
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */ 
function myFunction() { 
    document.getElementById("myDropdown").style.display = "block"; 
} 

// Close the dropdown if the user clicks outside of it 
window.onclick = function(event) { 
    if (!event.target.matches('.dropdown-open')) { 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     if (openDropdown.style="display:block") { 
     openDropdown.style="display:none"; 
     } 
    } 
    } 
} 

</script>