javascript - Bootstrap 3 - 3x btn-group，带有下拉动画打开全部

Question

我需要使用下拉菜单创建 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();
    });

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