登录

javascript - 这个hover如何实现?

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

<p class="menu2_simple" style="position: fixed;display: none; margin-top: 200px;">
    <dl>
        <dt title="定价策略" class="">
            <i class="icon iconfont font30 red price_plans">&#xe604;</i>
            <p class="menu2_simple_second price_plans_content">
                <ul>
                    <li class="menu2-a-wrap"><a href="javascript:;" class="font12 lightgrey">自动调价</a></li>
                </ul>    
            </p>
        </dt>
        <dt title="销售工具" class="">
            <i class="icon iconfont font30 red sale_tools">&#xe609;</i>
            <p class="menu2_simple_second sale_tools_content" style="top: 30px">
                <ul>
                    <li class="menu2-a-wrap">
                        <a href="javascript:;" class="font12">选择定金模式</a>
                                    <p class="menu2-a-con tooltip-only-arrow default right" style="display: none;"><p class="tooltip-arrow"><p class="tooltip-arrow cover"></p></p><p class="tooltip-inner"><i class="sui-icon icon-tb-close close"></i><p><strong class="bill"><span>当天支付订单金额的 <em class="font16 red today_price">3</em>%,余额请在 <em class="font16 red balance_price">3</em>个工作日内付清到账</span></strong>
                       </p>
                        <p>注:余额未在上述约定时间期限内付清到账,系统会自动撤销订单。</p>
                        <p class="block_grey" style="border:1px dashed #ccc;">
                            <p class="mb5"><strong class="mr20">是否启用订金模式设置</strong>
                                <span class="ml40 menu2_openuse">启用</span><span class="menu2_stopuse hide">停用</span>
                            </p>
                            <p class="red mb5">开盘期间禁止操作定金模式设置!</p>
                        </p>
                        </p>
                        </p>
                    </li>
                    <li><a href="javascript:;" class="font12 lightgrey">设置批量优惠</a></li>
                </ul>    
            </p>
        </dt>
        <dt title="资源设置" class="">
            <i class="icon iconfont font30 red resc_set">&#xe627;<p class="menu2_simple_second resc_set_content" style="top: 20px;">
                <ul>
                    <li class="menu2-a-wrap">
                        <a href="javascript:;" class="font12">设置违约金</a>
                            <p class="menu2-a-con tooltip-only-arrow default right" style="left: 80px;top: -55px; display:none;"><p class="tooltip-arrow"><p class="tooltip-arrow cover"></p></p><p class="tooltip-inner" style="width: 655px;"><i class="sui-icon icon-tb-close close"></i><p class="clear"><p class="fl" style="width: 440px; border-right: 1px dashed #ccc;"><p class="mb10 red font16">订单违约金收取方式</p><p class="chargeways_price"><input type="radio" checked="checked" name="radio" disabled="disabled">按金额收取,客户违约后按照订单总金额的 <select name="" style="width: 50px;" class="penalty"><option value="">9</option></select>%征收违约金 </p><p class="chargeways_order"><input type="radio" name="radio" disabled="disabled">按订单收取,客户违约后按照每个订单 <span>500</span>元征收违约金 </p>
                            </p>
                            <p class="fl pl20" style="width: 185px; line-height: 25px;"><i class="sui-icon icon-notification red font18 mr5"></i>当前是按<span>金额9%</span>收取违约金,修改设置后,第2天生效。 </p>
                           </p>
                            </p>
                            </p>
                    </li>
                    <li class="menu2-a-wrap"><a href="javascript:;" class="font12">编辑明细</a></li>
                    <li class="menu2-a-wrap"><a href="javascript:;" class="font12 lightgrey">设置后结算</a></li>
                    <li class="menu2-a-wrap"><a href="javascript:;" class="font12 lightgrey">取消后结算</a></li>
                </ul>    
            </p></i>
            
        </dt>
    </dl>
</p>
$('.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');
                } 
            });
        })
# JavaScript
PHP中文网PHP中文网2153 天前570 次浏览

全部回复(2) 我要回复

  • 黄舟

    黄舟2017-04-11 13:25:13

    简单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}
    

    回复
    0
  • 巴扎黑

    巴扎黑2017-04-11 13:25:13

    <!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把隐藏显示做延时

    回复
    0
  • 取消回复发送