引導4：下拉選項卡項只能選擇一次

嗯，我正在試圖建立一個帶引導程序4的選項卡系統，並且由於有超過5個選項卡（共7個），我決定使用下拉選項卡將最後3個標籤作爲下拉項目放到第五個標籤（作爲父標籤）。代碼如下所示：引導4：下拉選項卡項只能選擇一次

<ul class="nav nav-tabs nav-justified"> 
    <li id="atab1" class="nav-item"><a href="#tab1" data-toggle="tab" class="nav-link active">Basic Info</a></li> 
    <li id="atab2" class="nav-item"><a href="#tab2" data-toggle="tab" class="nav-link">Additional Info</a></li> 
    <li id="atab3" class="nav-item"><a href="#tab3" data-toggle="tab"class="nav-link">Contact List</a></li> 
    <li id="atab4" class="nav-item"><a href="#tab4" data-toggle="tab" class="nav-link">Posts & Comments</a></li> 
    <li id="atab5" class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">More</a> 
     <div class="dropdown-menu"> 
      <a data-toggle="tab" class="dropdown-item" href="#tab5">Goods & Products</a> 
      <a data-toggle="tab" class="dropdown-item" href="#tab6">Services & Projects</a> 
      <a data-toggle="tab" class="dropdown-item" href="#tab7">Jobs & Offers</a> 
     </div> 
    </li> 
</ul>

但我遇到一個奇怪的問題，似乎卡中的各個下拉項只能進行一次選擇。這意味着如果我導航到另一個選項卡，我將無法再次選擇它。我進一步調查了這個問題，似乎一旦我從下拉列表中選擇一個項目，它就會一直保持「選定」狀態，直到我刷新頁面。下面的屏幕截圖顯示，如果我先選擇一個商品和服務標籤並切換到另一個標籤，則商品和服務標籤都會被選中並激活（實際上，選擇一個標籤應取消另一個標籤並使其無效）。

http://oi59.tinypic.com/33gx.jpg

因此，任何人知道如何解決這個問題？我一直在努力，但仍然找不到方法。

來源

2015-10-20 Lord Yggdrasill

附加代碼jsfilddle –

這是Bootstrap 4的一個已知問題。開發人員已經在github上回復了它，這裏是：https://github.com/twbs/bootstrap/issues/17371。

推薦的解決方法是從顯示的事件中刪除活動類。我有類似的問題，這個修復對我有用。

$('.nav-tabs').on('shown.bs.tab', 'a', function (e) { 
    if (e.relatedTarget) { 
     $(e.relatedTarget).removeClass('active'); 
    } 
})

來源

2016-03-09 14:25:45 James

這並不在我的網站在所有的工作，對不起。 –

由於引導4測試版，詹姆斯的回答可能需要一些更新，如改變relatedTarget到currentTarget當前或目標：

$('.nav-tabs').on('shown.bs.tab', 'a', function (e) { 
    if (e.currentTarget) { 
     $(e.currentTarget).removeClass('active'); 
    } 
});

來源

2017-09-05 12:45:12 Anarchimedes

引導4：下拉選項卡項只能選擇一次

回答

相關問題