네비게이션 바가 접혀있을 때 드롭 다운에서 접히는 부트 스트랩 3 네비게이션 변경을 어떻게 만들 수 있습니까?

Question

나는 계층 적 탐색이 많은 페이지를 구축하고 있으며 보스는 워크 스테이션이나 모바일 장치에서 보든 탐색 경로 전체를 모든 페이지에서 액세스 할 수 있기를 원합니다. 각 장치 유형에 맞는 메뉴를 만드는 방법을 알아 냈지만 동적으로 전환하는 방법을 알 수는 없습니다. 나는이 같은 드롭 다운 메뉴를 변경하는 방법을 알아 내려고 노력하고있어

,이 같은 붕괴 메뉴로

<ul class="nav navbar-nav navbar-center"> 
<li> 
    <a class="dropdown-toggle" data-toggle="dropdown">MainHeader</a> 
    <ul class="dropdown-menu multi-level"> 
    <li class="dropdown-submenu"> 
    <a class="dropdown-toggle" data-toggle="dropdown">SubHeader</a> 
    <ul class="dropdown-menu"> 
    <li><a href="#">ListItem</a></li> 

, 부트 스트랩 네비게이션 바이 붕괴 될 때마다

<ul class="nav navbar-nav navbar-center"> 
<div class="panel-group"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
    <a data-toggle="collapse" href="#collapse1">MainHeader</a> 
    </div> 
    <div id="collapse1" class="panel-collapse collapse"> 
    <ul class="list-group"> 
    <li class="list-group-item"> 
     <div class="panel-heading"> 
     <a data-toggle="collapse" href="#collapse1a">SubHeader</a> 
     </div> 
     <div id="collapse1a" class="panel-collapse collapse"> 
     <ul class="list-group"> 
     <li class="list-group-item"><a href="#">ListItem</a></li> 

.

p.s. 이것은 Stack Overflow에 대한 나의 첫 번째 질문이며 CSS와 부트 스트랩에 익숙하지 않으므로 명확성을 위해이 질문을 편집해야 할 것입니다. 내가 혼란스러워하면 미리 사과드립니다.

Answer 1

최상의 해결책은 아니지만 CSS 미디어 쿼리를 통해 부트 스트랩이 메뉴 축소를 트리거하는 데 사용하는 것과 동일한 뷰포트 너비에서 원하는 동작을 트리거 할 수 있다는 것을 알았습니다.

@media (min-width: 768px) { 
    #navbar-menu-collapse { 
     display: none; 
    } 
} 

@media (max-width: 767px) { 
    #navbar-menu-dropdown { 
     display: none; 
    } 
} 

내가 원하는 방식으로 작동하는 codepen 예제를 만들었지 만 누군가가 더 나은 솔루션을 알고 있다면 나는 여전히 매우 흥미로울 것입니다!

http://codepen.io/LordGriffon/pen/peyRjZ