下拉菜单不显示

我正在使用下面给出的下拉菜单代码。当正常使用菜单的图像时，代码工作正常。但是，我希望相对放置下拉菜单，即使浏览器窗口调整大小（响应式网页设计）时也可以正确浏览菜单图标。所以我将图像元素包装在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

下拉菜单不显示

回答

相关问题