我想在用户点击图片时创建一个简单的下拉菜单。目前我正在使用 CSS 悬停但它不会停留所以我想将它转换为 JS onClick 函数。
<html>
<head>
<style>
ul {
text-align: left;
display: inline;
margin: 0;
list-style: none;
}
ul li {
display: inline-block;
position: relative;
}
ul li ul {
padding: 0;
position: absolute;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
display: block;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
</style></head><body>
<ul>
<li>
<img src="https://cdn1.iconfinder.com/data/icons/thincons/100/menu-128.png" width="20px;" height="18px;"/>
<ul class="lang">
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
</ul>
</body>
</html>
最佳答案
使用一点 jQuery，我们可以轻松地切换打开或关闭一个类来表示“显示”菜单:
$("#menu").click(function(){
$(this).toggleClass("activated");
});
并将 CSS(而不是 :hover)更改为:
ul li.activated ul {
display: block;
opacity: 1;
visibility: visible;
}
HTML 只需要第一个 li 元素有一个 id，这让我们可以使用 jQuery 将点击事件绑定(bind)到它。
<ul>
<li id="menu">
您可以在这个 fiddle 上看到所有的操作.
编辑:对于非 jQuery 解决方案，您可以使用以下 Javascript 代码:
var myEl = document.getElementById('menu');
myEl.addEventListener('click', function() {
this.classList.toggle('activated');
}, false);
关于javascript - 将 CSS Hover 转换为 JS onClick 以获得下拉菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33861664/