我试图创建这个 jquery 下拉菜单,但它不起作用,有谁知道如果我在 jquery 或 CSS 中遗漏了什么
<style type="text/css">
body{padding:0px;margin:0px;}
ul li{list-style-type:none;}
#cssdropdown{padding:0px;margin:0px;}
a{text-decoration:none;padding:0px;margin:0px;}
.headLink{ display: inline-block; padding:10px;margin:10px;text-align:right;background-color:#999999;cursor:pointer;}
.headLink ul{display:none;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function() {
$(".headLink").hover(function() {
$('ul',this).css("display","block");
$('ul',this).css("display","none");
})
})
</script>
<ul id="cssdropdown">
<li class="headLink">Home
<ul>
<li><a href="#">Home1</a></li>
<li><a href="#">Home4</a></li>
<li><a href="#">Home2</a></li>
<li><a href="#">Home3</a></li>
<li><a href="#">Home5</a></li>
</ul>
</li>
<li class="headLink">About
<ul>
<li><a href="#">About1</a></li>
<li><a href="#">About2</a></li>
<li><a href="#">About</a></li>
<li><a href="#">About3</a></li>
<li><a href="#">About5</a></li>
</ul>
</li>
<li class="headLink">Contact
<ul>
<li><a href="#">Contact1</a></li>
<li><a href="#">Contact2</a></li>
<li><a href="#">Contact3</a></li>
<li><a href="#">Contact4</a></li>
<li><a href="#">Contact5</a></li>
</ul>
</li>
<li class="headLink">Links
<ul>
<li><a href="#">Links1</a></li>
<li><a href="#">Links2</a></li>
<li><a href="#">Links3</a></li>
<li><a href="#">Links4</a></li>
<li><a href="#">Links5</a></li>
</ul>
</li>
</ul>
我也不确定 this
如何将 ul
作为参数。对于 jquery 中的函数
谢谢
最佳答案
对于初学者,您将在悬停时显示和隐藏 ul。 改变
$(function() {
$(".headLink").hover(function() {
$('ul',this).css("display","block");
$('ul',this).css("display","none");
})
})
到
$(function() {
$(".headLink").hover(function() {
$('ul',this).css("display","block");
}, function(){
$('ul',this).css("display","none");
})
})
关于javascript - 这个 jquery 下拉菜单有什么问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7594225/