javascript - 这个hover如何实现?
PHP中文网
PHP中文网 2017-04-11 13:23:13
[JavaScript讨论组]

当三级菜单出现的时候,一级菜单当前元素同辈元素hover失效;三级菜单关闭的时候,一级菜单hover恢复
我现在只知道失效$(this).siblings().unbind('mouseenter').unbind('mouseleave');
但是三级菜单关闭后同辈元素的hover失效,怎么恢复?

  • 设置批量优惠

$('.menu2-a-wrap-simple a').click(function() {
        $('.menu2-a-wrap-simple a').removeClass('current');
        $(this).addClass('current');
        $('.menu2-a-conn').hide();
        $(this).next('.menu2-a-conn').show();
        $('.menu2_simple').css("z-index", 1000);
        $('.blackMask_simple').show();
    })
    $('.menu2-a-conn .close').click(function() {
        $(this).parents('.menu2-a-conn').eq(0).hide();
        $('.menu2-a-wrap-simple a').removeClass('current');
        $('.menu2_simple').css("z-index", 0);
        $('.blackMask_simple').hide();
    })
 $('.menu2_simple dt').each(function(){
             $(this).hover(function(){
                 $('.menu2_simple').css("z-index", 1000);
                 $(this).addClass('bg_red');
                 $(this).children().eq(0).addClass('c_fff');
                 $(this).siblings().removeClass('bg_red');
                 $(this).siblings().children().eq(0).removeClass('c_fff');
            $(this).children().eq(1).show();
            $(this).siblings().children().eq(1).hide();    
            },function(){
                if ($('.menu2-a-conn').is(":visible")) {
                  **$(this).siblings().unbind('mouseenter').unbind('mouseleave');**
                } else{
                    $('.menu2_simple_second').hide();
                    $(this).removeClass('bg_red');
                    $(this).children().eq(0).removeClass('c_fff');
                } 
            });
        })
PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(2)
黄舟

简单demo

HTML:

<ul class='menu1'>
    <li>
        1
         <ul class='menu2'>
             <li>
                 1-1
                 <p>
                     1-1-1
                 </p>
             </li>
             <li>
                 1-2
                 <p>
                     1-2-1
                 </p>
             </li>
        </ul>
    </li>
        <li>
        2
         <ul class='menu2'>
             <li>
                 2-1
                 <p>
                     2-1-1
                 </p>
             </li>
             <li>
                 2-2
                 <p>
                     2-2-1
                 </p>
             </li>
        </ul>
    </li>
</ul>

CSS:

ul,li{list-style-type:none;padding: 0;font-size:25px;text-align: center;}
li,p{border:1px solid;line-height:50px;}

.menu1{ margin-left: 50px; }
.menu1>li{ width:50px;height:50px;position:relative}

.menu2{ position:absolute;left:51px;top:-1px;display:none }
.menu2>li{ width:100px;height:50px;position:relative}
.menu2>li p{width:100px;height:102px;position:absolute;left:100px;top:-1px;display:none }

.menu1>li:hover ul{display:block}
.menu2>li:hover p{display:block}
巴扎黑
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{display: block;}
        p p p{display:none;}
        p ul{display:none;}
        p:hover>p{display: block;padding-left:30px;}
        p:hover>ul{display: block;padding-left:30px;}
        p:hover>p{display: block;padding-left:30px;}
    </style>
</head>
<body>
    <p>
        <p>我是第一个
            <p>我是内容一
                <ul>
                    <li>1111111111</li>
                    <li>123123</li>
                </ul>
                <p>啦啦啦啦啦</p>
            </p>
            <p>我是内容二十</p>
        </p>
        <p>111111111111111111
            <p>我什么都没有</p>
        </p>
        <p>22222222222222222222222222
            <p>asdasd有</p>
        </p>
        <p>333333333333333333333333
            <p>我456456456有</p>
        </p>
        <p>3344444444444444444444
            <p>我46456456423123有</p>
        </p>
        <p>45555555555555555555555
            <p>我4567863694949494有</p>
        </p>
    </p>
</body>
</html>

1。正常的嵌套。用hover去做。
2。用settimeout把隐藏显示做延时
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号