onglet du panneau Bootstrap avec menu déroulant

Question

Heres un exemple d'un panneau avec des onglets et un menu déroulant: http://bootsnipp.com/snippets/featured/panels-with-nav-tabs

Y at-il un moyen de rendre l'acte de bouton déroulant sous forme d'onglet lui-même, et le menu déroulant apparaît uniquement si vous cliquez sur cette partie particulière de l'onglet (seulement si vous cliquez sur la flèche, pas le reste de l'onglet).

Answer 1

Est-ce le genre de choses que vous allez faire?

Si oui, vous pouvez placer le bouton principal et la partie de menu déroulant du bouton dans un groupe de boutons comme ceci:

<div class="btn-group"> 
    <button class="btn btn-default" onclick="window.location.href='#'"> 
    Split Dropdown 
    </button> 

    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"> 
    <span class="caret"></span> 
    </button> 

    <ul class="dropdown-menu"> 
    <li><a href="#">Dropdown Menu item 1</a></li> 
    <li><a href="#">Dropdown Menu item 2</a></li> 
    </ul> 
</div> 

Here est un violon de celui-ci dans l'action. (Assurez-vous d'inclure les liens vers des ressources Bootstrap et JQuery dans votre propre projet.)

MISE À JOUR:Here est un violon d'une approche similaire incorporée dans des panneaux.

C'est ce qu'il ressemble à:

Et voici le code pertinent (code complet en violon):

<div class="container"> 
    <div class="panel with-nav-tabs panel-default"> 
    <div class="panel-heading"> 
     <ul class="nav nav-tabs"> 

     <!-- Other tabs here --> 

     <li class="dropdown btn-group"> 
      <a class="btn" href="#tab-main" data-toggle="tab">Tab w/ Dropdown - Main Tab</a> 
      <a data-toggle="dropdown" class="btn dropdown-toggle"> 
      <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#tab-dropdown1" data-toggle="tab">Tab w/ Dropdown - Dropdown 1</a></li> 
      <li><a href="#tab-dropdown2" data-toggle="tab">Tab w/ Dropdown - Dropdown 2</a></li> 
      </ul> 
     </li> 

     </ul> 
    </div> 
    <div class="panel-body"> 
     <div class="tab-content"> 

     <!-- Other panes here --> 

     <div class="tab-pane fade" id="tab-main">Tab w/ Dropdown - Main Tab</div> 
     <div class="tab-pane fade" id="tab-dropdown1">Tab w/ Dropdown - Dropdown 1</div> 
     <div class="tab-pane fade" id="tab-dropdown2">Tab w/ Dropdown - Dropdown 2</div> 
     </div> 
    </div> 
    </div> 
</div> 

Le seul problème que je vois avec cette approche est Si vous vous trouvez dans une liste déroulante, vous ne pouvez pas revenir au panneau principal de cet onglet sans d'abord cliquer sur un autre onglet. En effet, l'onglet principal et l'onglet déroulant obtiennent la classe active, ce qui désactive les onglets (en plus d'ajouter un style qui indique que l'onglet est sélectionné). Si c'est un problème, vous devriez pouvoir le contourner avec du JavaScript.