将CSS悬停转换为JS onClick的下拉菜单？

Question

我想在用户单击图像时创建一个简单的下拉菜单。 当前，我正在使用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>

Answer 1

随着一点点的jQuery，我们可以很容易地toggle的一类或关闭代表“”显示菜单：

$("#menu").click(function(){
    $(this).toggleClass("activated");
});

并将CSS（而不是:hover ）更改为：

ul li.activated ul {
    display: block;
    opacity: 1;
   visibility: visible;
}

HTML只需要第一个li元素具有一个id，这使我们可以使用jQuery将click事件绑定到它。

<ul>
<li id="menu">

您可以在这把小提琴上看到一切。

编辑：对于非jQuery解决方案，可以使用以下Javascript代码：

var myEl = document.getElementById('menu');
myEl.addEventListener('click', function() {
    this.classList.toggle('activated');
}, false);

将CSS悬停转换为JS onClick的下拉菜单？

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-11-22 23:49:39

将CSS悬停转换为JS onClick的下拉菜单？

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-11-22 23:49:39

解决方案1
2 已采纳 2015-11-22 23:49:39