Bootstrap nav-tabs dropdown-menu multi-column

Question

Я пытаюсь создать раскрывающееся меню Bootstrap multi-column для навигационных вкладок. С помощью приведенного ниже кода я могу выбрать каждую вкладку. Когда я переключаюсь на другую вкладку, я не могу вернуться к предыдущей вкладке. Похоже, что все вкладки остаются активными. Как я могу это исправить?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<style> 
.dropdown-menu.multi-column { 
     width: 400px; 
} 

.dropdown-menu.multi-column .dropdown-menu { 
     display: block !important; 
     position: static !important; 
     margin: 0 !important; 
     border: none !important; 
     box-shadow: none !important; 
     min-width:100px; 
} 
</style> 

    <ul class="nav nav-tabs" id="myTabs" role="tablist"> 
     <li role="presentation" class="active"><a href="#main" id="main-tab" role="tab" data-toggle="tab" aria-controls="main" aria-expanded="false">Summary Table</a></li> 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">States</a> 
      <div class="dropdown-menu multi-column"> 
       <div class="row"> 
        <div class="col-md-6"> 
         <ul class="dropdown-menu"> 
          <li><a href="#Alabama" role="tab" id="Alabama-tab" data-toggle="tab">Alabama</a></li> 
          <li><a href="#Alaska" role="tab" id="Alaska-tab" data-toggle="tab">Alaska</a></li> 
         </ul> 
        </div> 
        <div class="col-md-6"> 
         <ul class="dropdown-menu"> 
          <li><a href="#Maine" role="tab" id="Maine-tab" data-toggle="tab">Maine</a></li> 
          <li><a href="#Maryland" role="tab" id="Maryland-tab" data-toggle="tab">Maryland</a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </li> 
    </ul> 

    <div class="tab-content" id="myTabContent" style="color:black"> 
     <div class="tab-pane fade in active" role="tabpanel" id="main" aria-labelledby="main-tab"> 
      <table class="table table-striped table-hover table-bordered table-responsive" id="rates"> 
       <thead> 
        <tr><th>State</th><th>Tax Rate</th></tr> 
       </thead> 
       <tbody> 
        <tr><td id="AL">Alabama</td><td id="AL_T">6.00%</td></tr> 
        <tr><td id="AK">Alaska</td><td id="AK_T">2.70%</td></tr> 

        <tr><td id="ME">Maine</td><td id="ME_T">3.00%</td></tr> 
        <tr><td id="MD">Maryland</td><td id="MD_T">3.00%</td></tr> 

       </tbody> 
      </table><br/> 
     </div> 

     <div class="tab-pane fade in" role="tabpanel" id="Alabama" aria-labelledby="Alabama-tab"> 
     <h5><span style="text-decoration: underline;">Alabama </span></h5> 
     </div> 

     <div class="tab-pane fade in" role="tabpanel" id="Alaska" aria-labelledby="Alaska-tab"> 
     <h5><span style="text-decoration: underline;">Alaska </span></h5> 
     </div> 

     <div class="tab-pane fade in" role="tabpanel" id="Maine" aria-labelledby="Maine-tab"> 
     <h5><span style="text-decoration: underline;">Maine </span></h5> 
     </div> 

     <div class="tab-pane fade in" role="tabpanel" id="Maryland" aria-labelledby="Maryland-tab"> 
     <h5><span style="text-decoration: underline;">Maryland </span></h5> 
     </div> 

    </div> 

Answer 1

Ответ от @Filipe Amaral был на 95% от этой проблемы. После нескольких модификаций он работает как шарм.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
      $('.dropdown-menu li').click (function(){ 
      $('.dropdown-menu li').removeClass('active') 

     }); 
     $('#main-tab').click (function(){ 
      $('.dropdown-menu li').removeClass('active') 

     }); 
    }); 
     $(function() { 

     var active = $('a[data-toggle="tab"]').parents('.active').length; 
     var tabClicked = false; 

     // Closes current active tab (toggle and pane): 
     var close = function() { 
      $('a[data-toggle="tab"]').parent().removeClass('active'); 
      $('.tab-pane.active').removeClass('active'); 

      active = null; 
     } 


     // Closing active tab when clicking on toggle: 
     $('[data-toggle=tab]').click(function(){ 
      if ($(this).parent().hasClass('active')){ 
       $($(this).attr("href")).toggleClass('active'); 

       active = null; 
      } else { 
       tabClicked = true; 
       active = this; 
      } 
     }); 

     // Closing active tab when clicking outside tab context (toggle and pane): 
     $(document).on('click.bs.tab.data-api', function(event) { 
      if(active && !tabClicked && !$(event.target).closest('.tab-pane.active').length) { 
       close(); 
      } 

      tabClicked = false; 
     }); 

     // Closing active tab on ESC key release: 
     $(document).keyup(function(e){ 
      if(active && e.keyCode === 27) { // ESC 
       close(); 
      } 
     }); 
    }); 

     </script> 

<style> 
.dropdown-menu.multi-column { 
     width: 400px; 
} 

.dropdown-menu.multi-column .dropdown-menu { 
     display: block !important; 
     position: static !important; 
     margin: 0 !important; 
     border: none !important; 
     box-shadow: none !important; 
     min-width:100px; 
} 
</style> 

    <ul class="nav nav-tabs" id="myTabs" role="tablist"> 
     <li role="presentation" class="active"><a href="#main" id="main-tab" role="tab" data-toggle="tab" aria-controls="main" aria-expanded="false">Summary Table</a></li> 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">States</a> 
      <div class="dropdown-menu multi-column"> 
       <div class="row"> 
        <div class="col-md-6"> 
         <ul class="dropdown-menu"> 
          <li><a href="#Alabama" role="tab" id="Alabama-tab" data-toggle="tab">Alabama</a></li> 
          <li><a href="#Alaska" role="tab" id="Alaska-tab" data-toggle="tab">Alaska</a></li> 
         </ul> 
        </div> 
        <div class="col-md-6"> 
         <ul class="dropdown-menu"> 
          <li><a href="#Maine" role="tab" id="Maine-tab" data-toggle="tab">Maine</a></li> 
          <li><a href="#Maryland" role="tab" id="Maryland-tab" data-toggle="tab">Maryland</a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </li> 
    </ul> 

    <div class="tab-content" id="myTabContent" style="color:black"> 
     <div class="tab-pane fade in active" role="tabpanel" id="main" aria-labelledby="main-tab"> 
      <table class="table table-striped table-hover table-bordered table-responsive" id="rates"> 
       <thead> 
        <tr><th>State</th><th>Tax Rate</th></tr> 
       </thead> 
       <tbody> 
        <tr><td id="AL">Alabama</td><td id="AL_T">6.00%</td></tr> 
        <tr><td id="AK">Alaska</td><td id="AK_T">2.70%</td></tr> 

        <tr><td id="ME">Maine</td><td id="ME_T">3.00%</td></tr> 
        <tr><td id="MD">Maryland</td><td id="MD_T">3.00%</td></tr> 

       </tbody> 
      </table><br/> 
     </div> 

     <div class="tab-pane fade in" role="tabpanel" id="Alabama" aria-labelledby="Alabama-tab"> 
     <h5><span style="text-decoration: underline;">Alabama </span></h5> 
     </div> 

     <div class="tab-pane fade in" role="tabpanel" id="Alaska" aria-labelledby="Alaska-tab"> 
     <h5><span style="text-decoration: underline;">Alaska </span></h5> 
     </div> 

     <div class="tab-pane fade in" role="tabpanel" id="Maine" aria-labelledby="Maine-tab"> 
     <h5><span style="text-decoration: underline;">Maine </span></h5> 
     </div> 

     <div class="tab-pane fade in" role="tabpanel" id="Maryland" aria-labelledby="Maryland-tab"> 
     <h5><span style="text-decoration: underline;">Maryland </span></h5> 
     </div> 

    </div> 

Answer 2

Добавьте к нижней

<script type="text/javascript"> 
     $(function() { 

     var active = $('a[data-toggle="tab"]').parents('.active').length; 
     var tabClicked = false; 

     // Closes current active tab (toggle and pane): 
     var close = function() { 
      $('a[data-toggle="tab"]').parent().removeClass('active'); 
      $('.tab-pane.active').removeClass('active'); 
      active = null; 
     } 

     // Closing active tab when clicking on toggle: 
     $('[data-toggle=tab]').click(function(){ 
      if ($(this).parent().hasClass('active')){ 
       $($(this).attr("href")).toggleClass('active'); 
       active = null; 
      } else { 
       tabClicked = true; 
       active = this; 
      } 
     }); 

     // Closing active tab when clicking outside tab context (toggle and pane): 
     $(document).on('click.bs.tab.data-api', function(event) { 
      if(active && !tabClicked && !$(event.target).closest('.tab-pane.active').length) { 
       close(); 
      } 

      tabClicked = false; 
     }); 

     // Closing active tab on ESC key release: 
     $(document).keyup(function(e){ 
      if(active && e.keyCode === 27) { // ESC 
       close(); 
      } 
     }); 
    }); 

     </script> 

И кнопка перед последним </div>

<a href="#" class="btn btn-primary">Close active tab</a> 

Я знаю, что это не самое лучшее решение, но делает работу и с немного терпения, вы можете сделать это лучше.