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，我们可以轻松07-23 11:16:19.020: D/dalvikvm(830): Not late-enabling CheckJNI (already on) 07-23 11:16:23.280: D/AndroidRuntime(830): Shutting down VM 07-23 11:16:23.280: W/dalvikvm(830): threadid=1: thread exiting with uncaught exception (group=0xada4aba8) 07-23 11:16:23.390: E/AndroidRuntime(830): FATAL EXCEPTION: main 07-23 11:16:23.390: E/AndroidRuntime(830): Process: com.affectiva.android.affdex.measureup, PID: 830 07-23 11:16:23.390: E/AndroidRuntime(830): java.lang.UnsatisfiedLinkError: Couldn't load affdexface_jni from loader dalvik.system.PathClassLoader[DexPathList[[zip file "/data/app/com.affectiva.android.affdex.measureup-1.apk"],nativeLibraryDirectories=[/data/app-lib/com.affectiva.android.affdex.measureup-1, /system/lib]]]: findLibrary returned null 07-23 11:16:23.390: E/AndroidRuntime(830): at java.lang.Runtime.loadLibrary(Runtime.java:358) 07-23 11:16:23.390: E/AndroidRuntime(830): at java.lang.System.loadLibrary(System.java:526) 07-23 11:16:23.390: E/AndroidRuntime(830): at com.affectiva.android.affdex.sdk.detector.AffdexFaceJNI.<clinit>(AffdexFaceJNI.java:21) 07-23 11:16:23.390: E/AndroidRuntime(830): at com.affectiva.android.affdex.sdk.detector.AffdexFaceJNI$$InjectAdapter.get(AffdexFaceJNI$$InjectAdapter.java:27) 07-23 11:16:23.390: E/AndroidRuntime(830): at com.affectiva.android.affdex.sdk.detector.AffdexFaceJNI$$InjectAdapter.get(AffdexFaceJNI$$InjectAdapter.java:14)开启或关闭课程来表示“显示”菜单：

toggle

将CSS（而不是$("#menu").click(function(){ $(this).toggleClass("activated"); });）更改为：

:hover

HTML只需要第一个ul li.activated ul { display: block; opacity: 1; visibility: visible; }元素具有id，这允许我们使用jQuery将click事件绑定到它。

li

您可以在fiddle上看到这一切。

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

<ul>
<li id="menu">

将CSS悬停转换为JS onClick for Dropdown菜单？

1 个答案: