如何解决无法关闭移动设备上的CSS下拉菜单
下拉菜单显示完美。但是,即使使用菜单顶部的“关闭”链接,我也无法关闭移动设备上的菜单。奇怪的是,当使用菜单底部的“关闭”链接时,菜单确实关闭了。但是我需要菜单顶部的关闭链接才能正常工作-看起来要好得多。
关于以任何方式关闭移动设备上的下拉菜单的任何建议(使用关闭链接,在菜单外部点击等)?我只想用CSS关闭它。 Javascript将是我的第二选择。我不熟悉Jquery或AJAX等,因此仅在可能的情况下才需要使用CSS和Javascript。尚未找到任何在线有效的答案。
.dropbtn {
background-color: gainsboro;
color: black;
border: 1px solid black;
padding: 4px;
font-size: 12px;
cursor: pointer;
}
.dropbtn:hover,.dropbtn:focus {
background-color: silver;
}
#closeMobileMenu {
padding;
0px;
}
ul {
padding: 0;
margin: 0;
}
li.dropDownActivator {
display: inline;
position: relative;
margin-right: 65px;
}
li.dropDownLink {
display: block;
background: silver;
padding: 10px;
}
ul ul {
position: absolute;
display: none;
left: 0;
top: 100%;
}
li.dropDownActivator:hover ul {
display: block;
}
li.dropDownActivator:hover ul #closeMobileMenu:active {
display: none;
}
<ul>
<li class="dropDownActivator">
<button class="dropbtn">Menu</button>
<ul>
<!-- this 'Close' link does NOT close menu -->
<li class="dropDownLink"><a href="" id="closeMobileMenu">Close</a></li>
<li class="dropDownLink"><a href="example.com">Menu link 1</a></li>
<li class="dropDownLink"><a href="example.com">Menu Link 2</a></li>
<li class="dropDownLink"><a href="example.com">Menu Link 3</a></li>
<!-- *** Strangely this link DOES close the menu,but the close link above doesn't -->
<li class="dropDownLink"><a href="" id="closeMobileMenu">Close</a></li>
</ul>
</li>
</ul>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。