Bootstrap 3 - 3x btn-group 与下拉动画打开所有答案

【问题标题】：Bootstrap 3 - 3x btn-group with dropdown animate open allBootstrap 3 - 3x btn-group 与下拉动画打开所有
【发布时间】：2015-10-21 19:06:58
【问题描述】：

我需要使用下拉菜单创建 3x 图像。我选择了带有下拉菜单的 btn-group，但是当我添加幻灯片过渡（JS）时，出现了问题。当我点击一个 - 全部打开，但我只想打开这个，怎么做？我的代码：

                   <div class="btn-group">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="http://placehold.it/500x250" alt="" class="img-responsive" />
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">First action</a></li>
                        </ul>
                    </div><!-- /.btn-group -->
                    <div class="clearfix"></div><!-- /.clearfix -->
                    <div class="btn-group">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="http://placehold.it/500x250" alt="" class="img-responsive" />
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Second action</a></li>
                        </ul>
                    </div><!-- /.btn-group -->
                    <div class="clearfix"></div><!-- /.clearfix -->
                    <div class="btn-group">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="http://placehold.it/500x250" alt="" class="img-responsive" />
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Third action</a></li>
                        </ul>
                    </div><!-- /.btn-group -->

还有 JS：

    $('.btn-group').on('show.bs.dropdown', function (e) {
        $('.dropdown-menu').stop(true, true).slideDown();
    });

    $('.btn-group').on('hide.bs.dropdown', function (e) {
        $('.dropdown-menu').stop(true, true).slideUp();
    });

【问题讨论】：

标签： javascript jquery css twitter-bootstrap dropdown

【解决方案1】：

使用this 代替.dropdown-menu：

$('.btn-group').on('show.bs.dropdown', function (e) {
  $(this).find('.dropdown-menu').stop(true, true).slideDown();
});
$('.btn-group').on('hide.bs.dropdown', function (e) {
  $(this).find('.dropdown-menu').stop(true, true).slideUp();
});

【讨论】：