带下拉菜单的切换按钮 - 引导程序答案

【问题标题】：Toggle Button with dropdown - bootstrap带下拉菜单的切换按钮 - 引导程序
【发布时间】：2019-06-17 14:04:35
【问题描述】：

我有一个带有很棒的字体图标的按钮组和一个下拉菜单，如下例所示。我想切换按钮状态。但是在mouseout 上，.active 类会被自动删除。这似乎与bootstrap.js 中所有.btn-Classes 的focus-Event 捕获有关。 $().button("toggle") 也会发生这种情况。

我该如何解决这个问题？

.btn-group-toggle 在此处无法与下拉菜单结合使用。

$('#tools button').on('click', function () {
if (this.id == 'select') {
  // FIXME: The active class gets removed immediatly somehow
  $('#pencil').removeClass('active');
  $('#select').addClass('active');
} else {
  $('#pencil').addClass('active');
  $('#select').removeClass('active');
}
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="btn-group-vertical d-flex" data-toggle="buttons role goup" id="tools">
          <button type="button" class="btn btn-outline-secondary dropdown-toggle" id="pencil" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-pencil-alt" aria-hidden="true"></i></button>
          <div class="dropdown-menu" aria-labelledby="pencil" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 38px, 0px);">
            <p class="text-center">Stroke Width: <span id="pencilwidthtext">10</span></p>
            <input type="range" class="custom-range" id="pencilwidth" value="10" min="1">
          </div>
          <button type="button" class="btn btn-outline-secondary" id="select" aria-pressed="false"><i class="fas fa-mouse-pointer" aria-hidden="true"></i></button>
        </div>

【问题讨论】：

活动类被移除.....从哪个元素中移除？
抱歉，如果不清楚。如果我点击#select，我想在之后切换此按钮以激活。但是活动类不会在鼠标移出时设置/删除。
我很确定引导 btn-group 会切换其按钮的活动状态。只需从 #select 元素中删除 addClass、removeClass 即可
我没有深入研究引导文档，也没有查看 btn 组如何处理活动状态的切换，这就是我评论而不是回答的原因 - 你可能应该这样做。将您的 if - else 更改为： if (this.id != 'select') { $('#select').removeClass('active'); } 并且它会工作
是的，你是对的。看我上面的评论

标签： javascript jquery html twitter-bootstrap bootstrap-4

【解决方案1】：

你可以试试Event.stopPropagation():

$('#tools button').on('click', function (e) {
  if (this.id == 'select') {
    $('#pencil').removeClass('active');
    $('#select').addClass('active');
    e.stopPropagation();
  } else {
    $('#pencil').addClass('active');
    $('#select').removeClass('active');
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="btn-group-vertical d-flex" data-toggle="buttons role goup" id="tools">
  <button type="button" class="btn btn-outline-secondary dropdown-toggle" id="pencil" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-pencil-alt" aria-hidden="true"></i></button>
  <div class="dropdown-menu" aria-labelledby="pencil" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 38px, 0px);">
    <p class="text-center">Stroke Width: <span id="pencilwidthtext">10</span></p>
    <input type="range" class="custom-range" id="pencilwidth" value="10" min="1">
  </div>
  <button type="button" class="btn btn-outline-secondary" id="select" aria-pressed="false"><i class="fas fa-mouse-pointer" aria-hidden="true"></i></button>
</div>

【讨论】：

活动类被立即移除的问题依然存在。
不是这样，如果您单击#select 按钮然后再次单击铅笔按钮，则两个按钮同时处于活动状态。
感谢您的帮助@Mamun。我只试过event.removeEventListener()，但这在这里不起作用。我要查一下原因。