SlideUp и Slidedown в меню при наведении

У меня есть меню, в котором ползунок отображается на hover(). Я написал это так

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

});

Это показывает ползунок. (Мне нравится использовать slideDown() и slideUp(), чтобы хорошо выглядеть). Когда я перемещаю ползунок cursor, он возвращается в состояние display:none. Итак, я попробовал это

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

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

 });

});

Это устанавливает ползунок в состояние display:none после того, как я перемещаю курсор из menu. Есть ли более простой способ сделать это?


html toggle jquery slidedown slideup
person Jhonny    schedule 17.04.2013    source источник
comment
не могли бы вы использовать логическое значение и передать его в качестве атрибута данных? Затем вы можете вернуть значение, которое является значением для постоянства, когда функция срабатывает.   -  person Alex Lynham    schedule 17.04.2013

Ответы (1)


arrow_upward
2
arrow_downward

Вы ожидаете, как

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);
    });
});
person vinothini    schedule 17.04.2013
comment
Отличная работа vinothini Я решаю аналогичную проблему здесь. Вместо ul внутри тега кнопки он должен быть таким: jsbin.com/iroxop/2 (Проблема в том, что если я двигаюсь куда-то от кнопки, меню должно быть скрыто). - person Jhonny; 17.04.2013