下拉菜單不顯示

我正在使用下面給出的下拉菜單代碼。當正常使用菜單的圖像時，代碼工作正常。但是，我希望相對放置下拉菜單，即使瀏覽器窗口調整大小（響應式網頁設計）時也可以正確瀏覽菜單圖標。所以我將圖像元素包裝在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

/*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}

來源

2017-04-15 MohanVS

在您window.onclick處理程序，您正在設置處理程序忽略.menu，而不是像在您的實際點擊就會觸發點擊。因此窗戶。

的ID添加到您的IMG命名爲menu_img和變化如下

/*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'))

到

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

片段

來源

2017-04-15 02:42:59 repzero

Thanks repzero！ – MohanVS

我相信你的問題源於你的event.target並不總是你所期望的。因此，當您打開下拉菜單並取消myFunction()時，window.onclick函數將立即執行。

我所做的是爲所有可以點擊的元素添加一個新類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>

來源

2017-04-15 02:45:16

下拉菜單不顯示

回答

相關問題