u010003962
2017-04-26 10:33
采纳率: 75%
浏览 1.4k

鼠标悬停 二级菜单不显示,Jquery哪里不对啊?

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级菜单</title>
<script type="text/javascript" src="jquery-3.2.0.js"></script>
<style type="text/css">
a{
    color:#FFF;
    text-decoration:none;
}
.first,.second
{
    list-style:none;
}
.first>li
{
    float:left;
}
.second
{
    padding:0px;
}
.first>li>a
{
    background:grey;
    color:#FFF;
    margin-left:1px;
    width:100px;
    padding-top:10px;
    padding-bottom:10px;
    text-align:center;
    display:block;
}

.second>li>a
{
    width:100px;
    background:blue;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:0px;
    margin-top:1px;
    margin-left:0px;
    text-align:center;
    display:none;
}

</style>
</head>

<body>
    <ul class="first">
    <li>
        <a href="javascript:void(0)">固话业务</a>
        <ul class="second">
            <li><a href="javascript:void(0)">400电话</a></li>
            <li><a href="javascript:void(0)">401电话</a></li>
            <li><a href="javascript:void(0)">402电话</a></li>
        </ul>
    </li>
    <li>
        <a href="javascript:void(0)">宽带业务</a>
        <ul class="second">
            <li><a href="javascript:void(0)">8兆宽带</a></li>
            <li><a href="javascript:void(0)">16兆宽带</a></li>
            <li><a href="javascript:void(0)">24兆宽带</a></li>
        </ul>
    </li>
    <li>
        <a href="javascript:void(0)">帮助与支持</a>
    </li>
</ul>

<script type="text/javascript">
        $('ul.first>li>a').hover(function(){
            $(this).css('background','red');
            $(this).next().children().has('a').css('color','black').show();
        },function(){
            $(this).css('background','grey');
            $(this).next().children().has('a').css('display','none');
        });
</script>

</body>
</html>
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 已采纳

    jquery路径对了没有?而且2+的jquery不支持ie8-,注意浏览器兼容性
    has改为find

    
            $('ul.first>li>a').hover(function () {
                $(this).css('background', 'red');
                $(this).next().children().find('a').css('color', 'black').show();
            }, function () {
                $(this).css('background', 'grey');
                $(this).next().children().find('a').css('display', 'none');
            });
    
    打赏 评论
  • 回神和回望 2017-04-26 11:46

    做二级下拉菜单方法很多,可有用添加删除类的方法,你用的是改变css样式,你布局是什么样的/

    打赏 评论

相关推荐 更多相似问题