Question

我想要带有幻灯片和幻灯片效果的下拉菜单。并且它有效，但当我徘徊两次三次然后它继续滑行和外出取决于我悬停的时间。

    <div class="tp-menu">
<ul class="menu nav navbar-nav">
    <li class="" style=""><a  class="dropdown-toggle" href="index1.html">Demo 1 </a>
        <ul class="dropdown-menu" style="display: none;">
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 1">Sub demo1</a></li>
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 2">Sub demo2</a></li>
        </ul>
    </li>
    <li class="" style=""><a  class="dropdown-toggle" href="index1.html">Demo 2 </a>
        <ul class="dropdown-menu" style="display: none;">
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 1">Sub demo1</a></li>
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 2">Sub demo2</a></li>
        </ul>
    </li>
</ul></div>

和jquery

 $("div.tp-menu ul.menu li").hover(function () { //When trigger is hovered...
        $(this).children("ul.dropdown-menu").slideDown('fast');
        //alert(1);
    }, function () {
        $(this).children("ul.dropdown-menu").slideUp('slow');
    });

你可以在这里看到现场演示：http://jsfiddle.net/twb4spps/

我需要，如果我快速徘徊两次，但它会显示一次子菜单。

Answer 1

您需要停止动画并清除动画队列。你可以通过在hoverOut上应用.stop（true）来做到这一点。

.stop() //stops the nimation
.stop(true) //stops the animation and clears the queue

CODE：

(function ($) { 
$("div.tp-menu ul.menu li").hover(function () { //When trigger is hovered...
        $(this).children("ul.dropdown-menu").slideDown('fast');
        //alert(1);
    }, function () {
        $(this).children("ul.dropdown-menu").stop(true).slideUp('slow');
    });
}(jQuery));

JSFIDDLE

Answer 2

使用filter即可实现此目的。尝试像.filter(":not(:animated)")那样定位，这样就可以阻止其他不必要的动画。

  (function ($) { 
   $("div.tp-menu ul.menu li").hover(function () { //When trigger is hovered...
    $(this).children("ul.dropdown-menu").filter(":not(:animated)").slideDown('fast');
    //alert(1);
}, function () {
    $(this).children("ul.dropdown-menu").filter(":not(:animated)").slideUp('slow');
});
}(jQuery));

DEMO

Answer 3

根据您的喜好，这可能是Slavenko答案的替代方案：

(function ($) { 
$("div.tp-menu ul.menu li").hover(function () { 
        $(this).children("ul.dropdown-menu").filter(':not(:visible)').slideDown('fast');
    }, function () {
            $(this).children("ul.dropdown-menu").filter(':visible').slideUp('slow');
    });
}(jQuery));

这只是使用一些jquery的过滤器和css：not selector来仅将动画应用于可见的元素。

Answer 4

您的代码非常好，代码中没有问题，请尝试使用此CSS

ul.menu.nav.navbar-nav {
    float: left;
}

再次检查，它对我有用，查看完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" ></script>
</head>

<body>
<div class="tp-menu">
<ul class="menu nav navbar-nav">
    <li class="" style=""><a  class="dropdown-toggle" href="index1.html">Demo 1 </a>
        <ul class="dropdown-menu" style="display: none;">
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 1">Sub demo1</a></li>
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 2">Sub demo2</a></li>
        </ul>
    </li>
    <li class="" style=""><a  class="dropdown-toggle" href="index1.html">Demo 2 </a>
        <ul class="dropdown-menu" style="display: none;">
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 1">Sub demo1</a></li>
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 2">Sub demo2</a></li>
        </ul>
    </li>
</ul>
</div>
</body>
<script>
(function ($) { 
$("div.tp-menu ul.menu li").hover(function () { //When trigger is hovered...
        $(this).children("ul.dropdown-menu").slideDown('fast');
        //alert(1);
    }, function () {
        $(this).children("ul.dropdown-menu").slideUp('slow');
    });
}(jQuery));

</script>
</html>

Answer 5

jsfiddle

使用Javascript：

    (function ($) { 
$("div.tp-menu ul.menu li").hover(function () { //When trigger is hovered...
        $(this).children("ul.dropdown-menu").slideDown('fast');
        //alert(1);
    }, function () {
        $(this).children("ul.dropdown-menu").stop(true).slideUp('slow');
    });
}(jQuery));

CSS： .li_item { 显示：块; 最大宽度：60像素; }

.li_item>ul {
  margin: 0;
   padding: 0;
  display: block;
  width:200px;
}

Jquery Slidein滑出悬停效果问题

5 个答案: