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

Bootstrap 3 - 3x btn-group with dropdown animate打开全部

1 个答案: