Вертикальный складной пункт меню с использованием bootstrap 4 - PullRequest
Новая
       4

Вертикальный складной пункт меню с использованием bootstrap 4

0 голосов
/ 05 марта 2020

Используя bootstrap 4, и я пытаюсь сделать простое вертикальное складное меню. 

<div class="row">
    <div class="col-3">
        <div id="accordion">
            <div>
                <div id="tags">
                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseTags" aria-expanded="true" aria-controls="collapseTags">
                        <b>Tags</b>
                    </button>
                </div>
                <div id="collapseTags" class="collapse show" aria-labelledby="tags" data-parent="#accordion">
                    <div>
                        <ul>
                            <li class="nav-item"><a data-toggle="pill" href="#tag1">Tag 1</a></li>
                            <li class="nav-item"><a data-toggle="pill" href="#tag2">Tag 2</a></li>                            
                            <li class="nav-item"><a data-toggle="pill" href="#tag3">Tag 3</a></li>                                                        
                        </ul>
                    </div>
                </div>
            </div>
            <div>
                <div id="tagAttributes">
                    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTagAttributes" aria-expanded="false" aria-controls="collapseTagAttributes">
                        <b>Attributes</b>
                    </button>
                </div>
                <div id="collapseTagAttributes" class="collapse" aria-labelledby="tagAttributes" data-parent="#accordion">
                    <div>
                        <ul>
                            <li><a data-toggle="pill" href="#attribut1">attribut 1</a></li>
                            <li><a data-toggle="pill" href="#attribut2">attribut 2</a></li>
                            <li><a data-toggle="pill" href="#attribut3">attribut 3</a></li>                            
                            <li><a data-toggle="pill" href="#attribut4">attribut 4</a></li>                                                        
                            <li>
                                <a data-toggle="pill" href="#subattribute">Sub Attribute</a>
                                <ul>
                                    <li><a data-toggle="pill" href="#sub1">Sub 1</a></li>
                                    <li><a data-toggle="pill" href="#sub2">Sub 2</a></li>                                    
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-9">
        <div class="tab-content">
            <div class="tab-pane fade" id="tag1" role="tabpanel">tag1</div>
            <div class="tab-pane fade" id="tag2" role="tabpanel">tag2</div>
            <div class="tab-pane fade" id="tag3" role="tabpanel">tag3</div>
            <div class="tab-pane fade" id="attribut1" role="tabpanel">attribut 1</div>
            <div class="tab-pane fade" id="attribut2" role="tabpanel">attribut 2</div>
            <div class="tab-pane fade" id="attribut3" role="tabpanel">attribut 3</div>
            <div class="tab-pane fade" id="attribut4" role="tabpanel">attribut 4</div>
            <div class="tab-pane fade" id="subattribute" role="tabpanel">sub attributes</div>
            <div class="tab-pane fade" id="sub1" role="tabpanel">sub 1</div>
            <div class="tab-pane fade" id="sub2" role="tabpanel">sub 2</div>
        </div>
    </div>
</div>

JSFiddle DEMO

ВЫПУСК
Панель вкладок не показывает второй раз. Например. Нажмите на тег 1, он показывает соответствующую панель вкладок для тега 1. Затем нажмите на тег 2, он показывает соответствующую панель вкладок для тега 2. Теперь снова нажмите на тег 1, он не показывает соответствующую панель вкладок

Если я добавлю <ul class="nav flex-column"> ... `тогда это работает. Однако при этом удаляются маркеры для пунктов меню и подменю

Как мне сделать так, чтобы маркеры для каждого пункта меню

1 Ответ

2 голосов
/ 05 марта 2020

Требуется .nav для переключения работ. Таким образом, вы можете добавить другой класс для отмены стиля навигации, который скрывает маркеры в списке. 

<ul class="nav nav-list flex-column">
  <li class="nav-item"><a data-toggle="pill" href="#tag1">Tag 1</a></li>
  <li class="nav-item"><a data-toggle="pill" href="#tag2">Tag 2</a></li>                     
  <li class="nav-item"><a data-toggle="pill" href="#tag3">Tag 3</a></li>
</ul>

.nav-list {
  padding-left: 40px;
  list-style: disc;
}

padding-left: 40px и list-style: disc - это значения по умолчанию, если у вас не было .nav стиль.

...