点击打开bootstrap下拉列表

时间:2016-01-14 22:05:33

标签: javascript jquery css twitter-bootstrap-3

如您所见,我创建了btn-group

<div class="row">
    <div class="col-lg-12">
         <div class="btn-group inline">
              <a href="#" class="btn btn-success" >Offline</a>

              <a class="btn btn-info" id="print_map_btn">Print</a>
              <a href="#" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
              <ul class="dropdown-menu pull-right" id="print_options">
                <li data-option="complete_map"><a href="#">Complete</a></li>
                <li data-option="map_sector"><a href="#">Act</a></li>
              </ul>
         </div>
    </div>
</div>

当您点击右侧的箭头时,下拉列表会打开

我想实现这一点,当有人点击左侧的Print按钮时,下拉列表就会打开。

我试图像这样实现它:

var print_btn = $('#print_map_btn');

print_btn.click(function(){
    $('.btn-group').addClass('open');
});

但它不起作用: http://jsfiddle.net/52VtD/13893/

我该如何解决?谢谢

1 个答案:

答案 0 :(得分:2)

要完成您尝试执行的操作,只需将data-toggle="dropdown"属性添加到要切换下拉菜单的链接或按钮即可。

我已经更新了您的小提琴,供您查看。 http://jsfiddle.net/52VtD/13895/