悬停菜单上的SlideUp和Slidedown [英] SlideUp and Slidedown on hover menu

问题描述

我有一个菜单，该菜单将在hover()上显示一个滑块.我是这样写的

I am having a menu which will show a slider on hover(). I have written it like this

$(".menu2").hover(function ()
{
 $(".slider").slideDown(500);
  $(".slider").css('display','block');      
},
    function () {   
    $(".slider").slideUp(500);      
 //$('.slider').css("display","none");

});

这显示了滑块.(我喜欢使用slideDown()和slideUp()看起来不错).当我将cursor移动到滑块时，它将返回到display:none状态.所以我尝试了

This shows the slider.(I like to use slideDown() and slideUp() to look good). When I move my cursor to the slider it goes back to the display:none state. So I tried this

 $(".sliderHolder").hover(function ()
{
  $(".slider").css('display','block');              
},
    function () {

 $(".slider").slideUp(500);

 });

});

将光标从menu中移出后，这会将我的滑块设置为display:none状态.有没有更简单的方法可以做到这一点?

This sets my slider to display:none state after I move my cursor from the menu. Is there an easier way to do this though?

推荐答案

您是否期望

http://jsfiddle.net/jUraw/1369/

      <ul id="nav">
        <li><a href="home.html"><span>M</span>enu</a>
            <ul>
                <li><a href="fashion.html"><span>F</span>ashion</a></li>
                <li><a href="about-us.html"><span>A</span>bout <span>U</span>s</a></li>
                <li><a href="find-us.html"><span>F</span>ind <span>U</span>s</a></li>
                <li class="underline"><a href="http://www.bellissimafashions.com/blog/"><span>B</span>log</a></li>
            </ul>
        </li>    
    </ul>


$(document).ready(function (){
    var t = null;
    $('#nav li').hover(function(){
        var that = this;
        t = setTimeout(function(){
            $('ul', that).slideDown(200);
            t = null;
        }, 300);
    }, function(){
        if (t){
            clearTimeout(t);
            t = null;
        }
        else
            $('#nav li ul').slideUp(200);
    });
});

这篇关于悬停菜单上的SlideUp和Slidedown的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！