Bootstrap 3 не может снять отметку с обоснованной группы раскрывающихся кнопок для неактивных параметров.

С помощью Bootstrap 3.3.7 я пытаюсь создать группу выпадающих кнопок с обоснованной навигацией, чтобы правильно отмечать после выбора. У меня проблема с тем, что оба пункта меню отмечены в раскрывающемся списке, когда выбираются один за другим параметры. Есть ли способы иметь раскрывающееся меню, чтобы отмечать только выбранный вариант, при этом являясь кнопкой навигации по раскрывающемуся списку для группы? Спасибо!

пример кода

<div class="row">
<div class="col-md-7">
    <div class="btn-group btn-group-justified" role="group">
        <a href="#left" class="btn btn-primary" role="button" data-toggle="tab">Left</a>
        <a href="#middle" class="btn btn-primary" role="button" data-toggle="tab">Middle</a>
        <div class="btn-group" role="group">
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" role="button"> Dropdown <span class="caret"></span> </a>
            <ul class="dropdown-menu">
                <li><a href="#drop1" role="tab" data-toggle="tab">drop 1</a></li>
                <li><a href="#drop2" role="tab" data-toggle="tab">drop 2</a></li>
            </ul>
        </div>
    </div>

    <div class="tab-content">
        <div class="tab-pane active" role="tabpanel" id="left">please select 1 of the options in the dropdown</div>
        <div class="tab-pane" role="tabpanel" id="middle">please try the dropdown on the right</div>
        <div class="tab-pane" role="tabpanel" id="drop1">please try select drop 2 also, then both are marked under the dropdown</div>
        <div class="tab-pane" role="tabpanel" id="drop2">please try select drop 1 also, then both are marked under the dropdown</div>
    </div>
</div>


drop-down-menu jquery twitter-bootstrap-3 navbar buttongroup
person xam    schedule 21.06.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вместо использования групп кнопок я бы рекомендовал использовать компонент Nav, стилизованный с помощью класса модификатора pills. Это не то же самое, но очень близко, и панели вкладок созданы для работы со стилем таблеток.

Это решит вашу проблему с активным классом, оставшимся в раскрывающемся списке.

<div>
  <ul class="nav nav-pills nav-justified" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="pill">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="pill">Profile</a></li>
    <li role="presentation" class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
      <ul class="dropdown-menu">
        <li><a href="#messages" aria-controls="messages" role="tab" data-toggle="pill">Messages</a></li>
        <li><a href="#settings" aria-controls="settings" role="tab" data-toggle="pill">Settings</a></li>
      </ul>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">home</div>
    <div role="tabpanel" class="tab-pane" id="profile">profile</div>
    <div role="tabpanel" class="tab-pane" id="messages">messages</div>
    <div role="tabpanel" class="tab-pane" id="settings">settings</div>
  </div>
</div>

https://codepen.io/partypete25/pen/Moooaq?editors=1100

person partypete25    schedule 22.06.2017
comment
Я подумал об этой части, но проблема в том, что это должен быть стиль группы кнопок или похож на него. Кнопки должны отображаться в виде групповых кнопок, а не отдельных кнопок. Если присмотреться к деталям, они выглядели иначе. Просто пытаюсь сделать так, чтобы это выглядело как группа кнопок и работало как компонент навигации. Спасибо за попытку. - person xam; 22.06.2017
comment
Я применил стили кнопок к своим кнопкам nav-pill. Сначала добавьте class = btn btn-default к ссылкам вкладок, а затем обновите CSS, чтобы перезаписать текущий внешний вид nav-pill, чтобы он соответствовал таковым у кнопок в группе кнопок. взгляните на код сейчас. - person partypete25; 23.06.2017
comment
Это очень мило и очень близко к тому, что мне нужно. Я кое-что заметил. Когда я изменяю размер экрана или сужаю окно браузера. Когда это происходило, кнопка складывалась стопкой, и кнопки выглядели забавно. Есть ли способы применить стиль вертикальной группы кнопок при наложении стопки или сделать так, чтобы она не складывалась вообще? Группа кнопок не складывается, даже если мы сужаем браузер, как если бы он отображался на мобильном устройстве. Я не возражаю против того, чтобы они складывались в стопку, но групповой стиль выглядел связным, когда они складывались в стопку. большое спасибо! - person xam; 23.06.2017
comment
Хорошо, попробуй сейчас. Я только что обернул CSS, который изменяет радиус границы, в медиа-запрос с размера ipad (768 пикселей) вверх. - person partypete25; 24.06.2017
comment
Спасибо @ partypete25! Я принял ваш ответ и опубликовал ваш ответ в соответствии с моими требованиями, еще раз спасибо! - person xam; 26.06.2017

arrow_upward
0
arrow_downward

Я адаптировал ответы @ partypete25 в соответствии со своими потребностями. Еще раз спасибо @ partypete25!

пример кода

<style>
    .nav.nav-pills.nav-justified.nav-group > li:not(:first-child):not(:last-child) > .btn {
        border-radius: 0;
        margin-bottom: 0;
    }

    @media(max-width:768px){
        .nav.nav-pills.nav-justified.nav-group > li:first-child:not(:last-child) > .btn {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            margin-bottom: 0;

        }
        .nav.nav-pills.nav-justified.nav-group > li:last-child:not(:first-child) > .btn {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        .nav.nav-pills.nav-justified.nav-group li + li {
            margin-left: 0;
        }
    }
    @media(min-width:768px){
        .nav.nav-pills.nav-justified.nav-group > li:first-child:not(:last-child) > .btn {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        .nav.nav-pills.nav-justified.nav-group > li:last-child:not(:first-child) > .btn {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }
</style>

<div class="row">
    <div class="col-md-12">
        <ul class="nav nav-pills nav-justified nav-group">
            <li class="active"><a href="#left" class="btn btn-primary" role="tab" data-toggle="tab">Left</a></li>
            <li><a href="#middle" class="btn btn-primary" role="tab" data-toggle="tab">Middle</a></li>
            <li class="dropdown">
                <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" role="button"> Dropdown <span class="caret"></span> </a>
                <ul class="dropdown-menu">
                    <li><a href="#drop1" role="tab" data-toggle="tab">drop 1</a></li>
                    <li><a href="#drop2" role="tab" data-toggle="tab">drop 2</a></li>
                </ul>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" role="tabpanel" id="left">please select 1 of the options in the dropdown</div>
            <div class="tab-pane" role="tabpanel" id="middle">please try the dropdown on the right</div>
            <div class="tab-pane" role="tabpanel" id="drop1">please try select drop 2 also, then both are marked under the dropdown</div>
            <div class="tab-pane" role="tabpanel" id="drop2">please try select drop 1 also, then both are marked under the dropdown</div>
        </div>
    </div>
</div>
person xam    schedule 26.06.2017