这个 jquery 下拉菜单有什么问题答案

【问题标题】：what is wrong with this jquery drop down这个 jquery 下拉菜单有什么问题
【发布时间】：2011-09-29 16:19:42
【问题描述】：

我试图创建这个 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 内部的函数谢谢

【问题讨论】：

你说它“不起作用”，它有什么作用？你有任何错误吗？此外，选择器内的this 仅表示在this 的上下文中，与$(this).find('ul') 相同

标签： javascript jquery html css drop-down-menu

【解决方案1】：

对于初学者，您在悬停时显示和隐藏 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");
    })
})

Demo

【讨论】：

但是我的 CSS 到处都是浮动的。标题链接不会停留在顶部
@Mike 这不是 jQuery 的问题，而是与 CSS 相关的问题。你必须使用绝对定位才能工作。
@Mike this 之类的东西可以，但当然你必须使用 CSS 定位。这就引出了另一个问题。

【解决方案2】：

有一种使用纯 CSS 的方法。

删除<script> 标签，并用这些替换您的样式。 HTML 结构没有变化。

<style>
    *{padding:0;margin:0}
    ul{list-style:none}
    a{text-decoration:none}
    a:hover{color:red}
    .headLink{float:left;height:30px;line-height:30px;padding:0 10px;cursor:pointer}
    .headLink ul{display:none;position:absolute}
    .headLink:hover ul{display:block}
</style>

【讨论】：

是的，但不幸的是这不是跨浏览器兼容的:(
@Shef：假设您在谈论 .headLink:hover ul - 它适用于除 IE6 之外的所有浏览器，IE6 可以使用简单的 (JavaScript) 修复程序。
@thirtydot 这就是我所说的。我同意，有简单的 JS 修复，尽管 OP 可能希望在显示或隐藏子菜单时添加一些效果。因此，简单的 JS 修复是不够的。
@Shef：很好，但你应该说“这在 IE6 中不起作用”（这几乎不重要）而不是“这不是跨浏览器兼容”（听起来是个大问题！ )。
坦率地说，我不再担心IE6了。