Question

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

Answer 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

Answer 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>

这个jquery下拉有什么问题

2 个答案: