Question

我想要实现的是：点击INFO文本后，子菜单就会显示出来。当鼠标仍然在子菜单上时，它仍然存在。将鼠标移出子菜单，它将消失。

但在我的代码中，第二部分不起作用。即使我的鼠标仍在子菜单项上，菜单也会在超时值后消失。

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open2()
{  
jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = jQuery(this).find('ul').css('visibility', 'visible');
   ddmenuitem = jQuery(this).find('ul').toggle();}   

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

jQuery(document).ready(function()
{    
jQuery('#INFO > ul > li').bind('click', jsddm_open2);
jQuery('#INFO > ul > li > ul > li').bind('mouseout',  jsddm_timer);  
});

HTML标记：

<div id="INFO">
        <ul>
            <li>INFO
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>                            
                </ul>
            </li>
    </ul>
</div>

CSS

#INFO ul{padding: 0;}
#INFO ul li{display: block; width: 200px; padding-left: 25px; padding-top: 1px;}

#INFO ul li ul{position: absolute; z-index: 999; visibility: hidden; top: 20px; padding: 0px; left: 6px; border: 1px solid #888; border-top: none; height: auto !important; width: 180px; display: none;}
#INFO ul li ul li{ padding: 5px 20px; background: #1d7177; width: 140px; display: block;}
#INFO ul li ul li:hover{background: #000;}
#INFO a{ color: #fff; padding: 0px; height: auto;}

先谢谢。

Answer 1

试一试。

jQuery('#INFO > ul > li > ul').bind('mouseleave',  jsddm_timer);

这是一个article解释为什么mouseleave工作而mouseout没有。另请注意，我将#INFO > ul > li > ul > li更改为#INFO > ul > li > ul，因为当您切换li时会调用mouseleave。

Answer 2

如果你不想要任何褪色和什么效果，只需玩CSS：

HTML：

<div id="INFO">
    <p>INFO</p>
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>                            
    </ul>
</div>

CSS：

div#INFO > ul {
    display: none;
}

div#INFO:hover > ul {
    display: block;
}

Answer 3

<script src="jquery.js"></script>
<script>
$(document).ready(function(){

        $("#css").css("text-decoration",'none');
        $("#css").css("color",'black');
        $("#css").css("font-size",'24px');
        $("#css").css("font-family","'Comic Sans MS', cursive");
                            $(".a").css("text-decoration",'none');
                            $(".a").css("color",'black');
                            $(".a").css("font-size",'16px');
                            $(".a").css("font-family","'Comic Sans MS', cursive");
                            $(".a").css("text-decoration",'none');


$("#slide").hide();

        $("#slide").css("position","relative");
        $("#slide").css("top",'-30px');
        $("#slide").css("height",'200px');
        $("#slide").css("width",'150px');
        $("#slide").css("border",'groove');
        $("#slide").css("list-style",'none');
        $("#slide").css("border-radius","10px");


                    $(".toggle").mouseenter(function()
                    {
                        //$("#slide").slideToggle("slow");
                        $("#slide").show(1000);
                    });


                    $("#slide").mouseleave(function(){
                        $("#slide").hide(1000); 
                    })

                    })

</script>
<body id="body">
<a href="" id="css" class="toggle">Slidedown</a>

<div id="slide">
<li>&nbsp;</li>
<hr />
<li><a class="a" href="#">Google</a></li>
<li><a class="a" href="#">Youtube</a></li>
<li><a class="a" href="#">Gmail</a></li>
<li><a class="a" href="#">Facebook</a></li>
<li><a class="a" href="#">Twitter</a></li>
<li><a class="a" href="http://www.google.com">Slider</a></li>

</div>
</body>

jquery下拉菜单绑定mouseout计时器不起作用

3 个答案: