帶下拉菜單的切換按鈕 - 引導程序

Question

我有一個帶有字體真棒圖標的按鈕組和一個下拉菜單，如下例所示。 我想切換按鈕狀態。 但是在mouseout ， .active類會自動刪除。 這似乎與相關的focus -活動捕獲所有.btn在-班bootstrap.js 。 $().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>

Answer 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>