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

Question

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

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