javascript - Bootstrap 3 下拉动画第一次不显示

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'); 
    });
});

我所做的是通过悬停触发 Bootstrap 点击事件。我认为是最好的方法。

希望对您有所帮助。