Question

我有这个简单的脚本：

var $dropdowns = $('.dropdown');
$dropdowns.hover(function()
{
    $(this).addClass('open');
    $(this).find('.dropdown-toggle').attr('aria-expanded', 'true');
    $(this).find('.dropdown-menu').first().stop(true, true).delay(200).slideDown(400);
}, function()
{
    $(this).find('.dropdown-menu').first().stop(true, true).delay(200).slideUp(400, function()
    {
        $(this).parent().removeClass('open');
        $(this).parent().find('.dropdown-toggle').attr('aria-expanded', 'false');
    });
});

应该在悬停时为所有Bootstrap下拉菜单设置动画，但由于某些奇怪的原因，它在第一次没有工作;之后，一切都很好。那是为什么？

我还尝试在最后添加此$('.dropdown-toggle').dropdown('toggle').dropdown('toggle');而没有正面结果。

根据要求，这是导航栏的html：

<nav class="navbar navbar-default" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="../php/content.php" target="_self">My cool website</a>
    </div>
    <div id="nav" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href>Caini<span class="caret"></span></a><ul class="dropdown-menu" role="menu"><li><a href="../php/content.php?group=1&page=1">Istorie</a></li><li><a href="../php/content.php?group=1&page=2">Mancare</a></li><li><a href="../php/content.php?group=1&page=3">Comportament</a></li></ul></li><li class="active"><a href="../php/content.php?group=13&page=6">Monstrii</a></li><li><a href="../php/content.php?group=2&page=4">Pisici</a></li><li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href>Gaini<span class="caret"></span></a><ul class="dropdown-menu" role="menu"><li><a href="../php/content.php?group=4&page=11">Cucurigu</a></li><li><a href="../php/content.php?group=4&page=9">Cotcodac</a></li></ul></li><li><a href="../php/new_group.php?add=true">+ Add a new group</a></li>            </ul>
    </div>
</div>

请原谅我的格式，但那是php生成的代码。

在gon250的回答之后，我用相同的结果更新了我的代码：

var $dropdowns = $('.dropdown');
$dropdowns.hover(function()
{
    $('.dropdown-toggle', this).trigger('click');
});

$dropdowns.on('show.bs.dropdown', function(e)
{
    $(this).find('.dropdown-menu').first().stop(true, true).delay(200).slideDown(400);
});

$dropdowns.on('hide.bs.dropdown', function(e)
{
    e.preventDefault();
    $(this).find('.dropdown-menu').first().stop(true, true).delay(200).slideUp(400, function()
    {
        $(this).parent().removeClass('open');
        $(this).parent().find('.dropdown-toggle').attr('aria-expanded', 'false');
    });
});

这是对我有用的代码片段;感谢gon250。

var $dropdowns = $('.dropdown');
$dropdowns.hover(function()
{
    $('.dropdown-toggle', this).trigger('show.bs.dropdown');
}, function()
{
    $('.dropdown-toggle', this).trigger('hide.bs.dropdown');
});

$dropdowns.on('show.bs.dropdown', function(e)
{
    e.preventDefault();
    $(this).addClass('active');
    $(this).find('.dropdown-menu').first().stop(true, true).delay(200).slideDown(400, function()
    {
        $(this).parent().addClass('open');
        $(this).parent().find('.dropdown-toggle').attr('aria-expanded', 'true');
    });
});

$dropdowns.on('hide.bs.dropdown', function(e)
{
    e.preventDefault();
    if ($(this).find('li.active').length <= 0)
        $(this).removeClass('active');
    $(this).find('.dropdown-menu').first().stop(true, true).delay(200).slideUp(400, function()
    {
        $(this).parent().removeClass('open');
        $(this).parent().find('.dropdown-toggle').attr('aria-expanded', 'false');
    });
});

Answer 1

我为自己创建了一个演示：http://jsfiddle.net/e4tzdkLq/4/

$(document).ready(function(){
      //Animation Slideup
      $('.dropdown').on('show.bs.dropdown', function(e){
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown().delay(200);
      });
      //Animation Slidedown
      $('.dropdown').on('hide.bs.dropdown', function(e){
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp().delay(400);
      });

    $('.dropdown').hover(function(){ 
      $('.dropdown-toggle', this).trigger('click'); 
    });
});

我所做的是用悬停触发bootstraps点击事件。我认为这是最好的方式。

我希望它有所帮助。

Answer 2

就像“悬停”一样，你的“悬停”功能需要在动画完成后切换类以正常运行。

var $dropdowns = $('.dropdown');
$dropdowns.hover(function()
{
  $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown(400, function() {
    $(this).parent().addClass('open');
    $(this).parent().find('.dropdown-toggle').attr('aria-expanded', 'true');  
  });
}, function()
{
  $(this).find('.dropdown-menu').first().stop(true, true).delay(200).slideUp(400, function() {
    $(this).parent().removeClass('open');
    $(this).parent().find('.dropdown-toggle').attr('aria-expanded', 'false');
  });
});

实例

http://www.bootply.com/YEgWx0DX08

Answer 3

尝试

$(document).ready(function(){
var $dropdowns = $('.dropdown');
$dropdowns.hover(function()

.....

});

脚本加载太晚了。

Bootstrap 3下拉动画未首次显示

3 个答案: