Bootstrap 3 - 3x btn-group with dropdown animate open all

Question

我需要使用下拉菜单创建 3x 图像。我选择了 btn-group with dropdown，但是当我添加 slide transition (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();
    });

Answer 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();
});

Bootstrap 3 - 3x btn-group with dropdown animate open all

Bootstrap 3 - 3x btn-group with dropdown animate open all

javascript

jquery

css

twitter-bootstrap

dropdown