Bootstrap Вкладки панели с выпадающим меню

Question

Вот примером из панели с вкладками и выпадающего список: http://bootsnipp.com/snippets/featured/panels-with-nav-tabs

Есть ли способ, чтобы сделать кнопку выпадающей выступать в качестве самой вкладки, а выпадающий появляется только при нажатии на эту часть вкладки (только если вы нажмете на стрелку, а не на остальной вкладке).

Answer 1

Это то, что вам нужно?

Если да, то вы можете разместить основную кнопку, и выпадающую часть кнопки внутри кнопки группы, как это:

<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 является скрипкой его в действии. (Не забудьте включить ссылки ресурсов Bootstrap и JQuery в рамках собственного проекта.)

UPDATE:Here является скрипкой подобного подхода, включенным в панель.

Это то, что он выглядит следующим образом:

И это уместный код (полный код в скрипке):

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

Единственная проблема, которую я вижу с этим подходом является что если вы находитесь на выпадающей панели, вы не можете вернуться на основную панель этой вкладки, не нажав сначала другую вкладку. Это связано с тем, что как основная, так и выпадающая вкладка получают класс active, который инактивирует вкладки (в дополнение к добавлению стиля, который указывает, что вкладка выбрана). Если это проблема, вы должны иметь возможность обойти ее с помощью JavaScript.