ブートストラップ応答マルチレベルナビゲーションメニュー

Question

ブートストラップ用のマルチレベルナビゲーションメニューをコーディングしました。 1200px以上でうまく動作します。しかし、画面サイズが1200px（私はブレイクポイントとして1200pxを設定している）未満の場合、最初のレベルのドロップダウンメニューは、よく開くと閉じますが、2番目のレベルのドロップダウンメニューはクリック時に開きません。親アンカーがクリックされたときに、この第2レベルのドロップダウンメニューを1200以下のスクリーンサイズで開くようにします。 たとえば、サービス>美容歯科が1200px以下の画面サイズでクリックされた場合、その中に '.dropdown-menu'（歯科衛生、義歯など）を表示して、表示/非表示にします。 これをどうすれば実現できますか？

これはHTMLです：

<nav id="navbar" class="navbar navbar-default" role="navigation"> 
     <div class="container"> 
      <div class="navbar-inner"> 
       <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav navbar-left"> 
        <li><a href="#">Home</a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <i class="fa fa-angle-down"></i></a> 
          <ul class="dropdown-menu"> 
           <li class="menu-item dropdown dropdown-submenu"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a> 
            <ul class="dropdown-menu"> 
             <li class="menu-item"><a href="#">Dental Hygiene</a></li> 
             <li class="menu-item"><a href="#">Crowns & Bridges</a></li> 
             <li class="menu-item"><a href="#">Dentures</a></li> 
            </ul> 
           </li> 
           <li class="menu-item dropdown dropdown-submenu"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a> 
            <ul class="dropdown-menu"> 
             <li class="menu-item"><a href="#">Dental Hygiene</a></li> 
             <li class="menu-item"><a href="#">Crowns & Bridges</a></li> 
             <li class="menu-item"><a href="#">Dentures</a></li> 
            </ul> 
           </li> 
           <li class="menu-item dropdown dropdown-submenu"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a> 
            <ul class="dropdown-menu"> 
             <li class="menu-item"><a href="#">Dental Hygiene</a></li> 
             <li class="menu-item"><a href="#">Crowns & Bridges</a></li> 
             <li class="menu-item"><a href="#">Dentures</a></li> 
            </ul> 
           </li> 
           <li class="menu-item dropdown dropdown-submenu"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a> 
            <ul class="dropdown-menu"> 
             <li class="menu-item"><a href="#">Dental Hygiene</a></li> 
             <li class="menu-item"><a href="#">Crowns & Bridges</a></li> 
             <li class="menu-item"><a href="#">Dentures</a></li> 
            </ul> 
           </li> 
           <li class="menu-item"><a href="#">Nervous Patients Care</a></li> 
          </ul> 
         </li> 
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team <i class="fa fa-angle-down"></i></a> 
         <ul class="dropdown-menu"> 
           <li class="menu-item dropdown dropdown-submenu"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a> 
            <ul class="dropdown-menu"> 
             <li class="menu-item"><a href="#">Dental Hygiene</a></li> 
             <li class="menu-item"><a href="#">Crowns & Bridges</a></li> 
             <li class="menu-item"><a href="#">Dentures</a></li> 
            </ul> 
           </li> 
           <li class="menu-item dropdown dropdown-submenu"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a> 
            <ul class="dropdown-menu"> 
             <li class="menu-item"><a href="#">Dental Hygiene</a></li> 
             <li class="menu-item"><a href="#">Crowns & Bridges</a></li> 
             <li class="menu-item"><a href="#">Dentures</a></li> 
            </ul> 
           </li> 
           <li class="menu-item dropdown dropdown-submenu"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a> 
            <ul class="dropdown-menu"> 
             <li class="menu-item"><a href="#">Dental Hygiene</a></li> 
             <li class="menu-item"><a href="#">Crowns & Bridges</a></li> 
             <li class="menu-item"><a href="#">Dentures</a></li> 
            </ul> 
           </li> 
           <li class="menu-item dropdown dropdown-submenu"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a> 
            <ul class="dropdown-menu"> 
             <li class="menu-item"><a href="#">Dental Hygiene</a></li> 
             <li class="menu-item"><a href="#">Crowns & Bridges</a></li> 
             <li class="menu-item"><a href="#">Dentures</a></li> 
            </ul> 
           </li> 
           <li class="menu-item"><a href="#">Nervous Patients Care</a></li> 
          </ul> 
        </li> 
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Offers/Fees <i class="fa fa-angle-down"></i></a> 
         <ul class="dropdown-menu"> 
           <li class="menu-item dropdown dropdown-submenu"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a> 
            <ul class="dropdown-menu"> 
             <li class="menu-item"><a href="#">Dental Hygiene</a></li> 
             <li class="menu-item"><a href="#">Crowns & Bridges</a></li> 
             <li class="menu-item"><a href="#">Dentures</a></li> 
            </ul> 
           </li> 
           <li class="menu-item dropdown dropdown-submenu"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a> 
            <ul class="dropdown-menu"> 
             <li class="menu-item"><a href="#">Dental Hygiene</a></li> 
             <li class="menu-item"><a href="#">Crowns & Bridges</a></li> 
             <li class="menu-item"><a href="#">Dentures</a></li> 
            </ul> 
           </li> 
           <li class="menu-item dropdown dropdown-submenu"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a> 
            <ul class="dropdown-menu"> 
             <li class="menu-item"><a href="#">Dental Hygiene</a></li> 
             <li class="menu-item"><a href="#">Crowns & Bridges</a></li> 
             <li class="menu-item"><a href="#">Dentures</a></li> 
            </ul> 
           </li> 
           <li class="menu-item dropdown dropdown-submenu"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a> 
            <ul class="dropdown-menu"> 
             <li class="menu-item"><a href="#">Dental Hygiene</a></li> 
             <li class="menu-item"><a href="#">Crowns & Bridges</a></li> 
             <li class="menu-item"><a href="#">Dentures</a></li> 
            </ul> 
           </li> 
           <li class="menu-item"><a href="#">Nervous Patients Care</a></li> 
          </ul> 
        </li> 
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Patients <i class="fa fa-angle-down"></i></a> 
         <ul class="dropdown-menu"> 
           <li class="menu-item dropdown dropdown-submenu"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a> 
            <ul class="dropdown-menu"> 
             <li class="menu-item"><a href="#">Dental Hygiene</a></li> 
             <li class="menu-item"><a href="#">Crowns & Bridges</a></li> 
             <li class="menu-item"><a href="#">Dentures</a></li> 
            </ul> 
           </li> 
           <li class="menu-item dropdown dropdown-submenu"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a> 
            <ul class="dropdown-menu"> 
             <li class="menu-item"><a href="#">Dental Hygiene</a></li> 
             <li class="menu-item"><a href="#">Crowns & Bridges</a></li> 
             <li class="menu-item"><a href="#">Dentures</a></li> 
            </ul> 
           </li> 
           <li class="menu-item dropdown dropdown-submenu"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a> 
            <ul class="dropdown-menu"> 
             <li class="menu-item"><a href="#">Dental Hygiene</a></li> 
             <li class="menu-item"><a href="#">Crowns & Bridges</a></li> 
             <li class="menu-item"><a href="#">Dentures</a></li> 
            </ul> 
           </li> 
           <li class="menu-item dropdown dropdown-submenu"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a> 
            <ul class="dropdown-menu"> 
             <li class="menu-item"><a href="#">Dental Hygiene</a></li> 
             <li class="menu-item"><a href="#">Crowns & Bridges</a></li> 
             <li class="menu-item"><a href="#">Dentures</a></li> 
            </ul> 
           </li> 
           <li class="menu-item"><a href="#">Nervous Patients Care</a></li> 
          </ul> 
        </li> 
        <li><a href="#">Blog</a></li> 
        <li><a href="#">Referrals</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
       </div> 
      </div><!-- end navbar-inner --> 
     </div><!-- end container --> 
    </nav><!-- end navbar --> 

CSS：

#navbar { 
    clear: both; 
    border-radius: 0; 
    border: 0; 
    margin: 0; 
    background: #f9f9f9; 
    height: auto; 
} 
#navbar li a { 
    text-transform: uppercase; 
    font-weight: 700; 
    font-size: 14px; 
    color: #575757; 
    padding-top: 20px; 
    padding-bottom: 20px; 
} 
#navbar li a:hover { 
    color: #7bcfdc 
} 

.dropdown-menu { 
    box-shadow: none; 
    border-radius: 0; 
    border: 0; 
    width: 240px; 
    padding: 0; 
} 
.dropdown-submenu { 
    position:relative; 
    border-radius: 0; 
    padding: 0; 
} 
.dropdown-submenu>.dropdown-menu { 
    top:0; 
    left:100%; 
    margin-top:-1px; 
    margin-left:-1px; 
} 
.dropdown-submenu.pull-left { 
    float:none; 
} 
.dropdown-submenu.pull-left>.dropdown-menu { 
    left:-100%; 
    margin-left:10px; 
} 

#navbar .navbar-nav li a i { 
    margin-left: 5px; 
} 
#navbar .navbar-nav li li a{ 
    background: #eee; 
    text-transform: none; 
    padding-top: 11px; 
    padding-bottom: 11px; 
} 
#navbar .navbar-nav li li { 
    position: relative; 
} 
#navbar .navbar-nav li li i { 
    position: absolute; 
    right: 20px; 
    top: 14px; 
} 
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a { 
    background: #e5e5e5; 
} 
#navbar .navbar-nav li li a:hover, 
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a:hover 
{ 
    background: #ff4e4f; 
    color: #FFF; 
} 



/*----- RESPONSIVE STYLES ------*/ 
@media screen and (max-width: 1199px) { 
    #navbar .dropdown-menu { 
     width: 100%; 
     position: relative; 
    } 
} 
@media screen and (max-width: 768px) { 
    .header-top p { 
     text-align: center; 
    } 
    .header-top a { 
     margin: 10px auto 0 auto; 
     clear: both; 
     display: block; 
    } 
} 
@media screen and (min-width: 1200px) { 
    #navbar .dropdown:hover > .dropdown-menu { 
     display: block; 
    } 
    .dropdown-submenu:hover>.dropdown-menu { 
     display:block; 
    } 
} 

私はこのためにJSFiddleを作った：
https://jsfiddle.net/Lefosx46/

Answer 1

私はあなたのコードを見ていました。多くのことが起こっているので、私の答えはうまくいくはずですが、もっと効率的なやり方があるかもしれません。少なくとも正しい方向に向けるかもしれない。私が誤解した場合https://jsfiddle.net/t4rnz8dg/

謝罪：

@media screen and (max-width: 1199px) { 
    #navbar .dropdown-menu { 
     width: 100%; 
     position: relative; 
    } 
} 

私はそれを削除して、コメントを追加：：

@media screen and (max-width: 1199px) { 
    .dropdown-submenu:hover .dropdown-menu { 
     display: block; 
    } 
} 

はあなたがここにフィドルを見ることができます

が問題とがあるように見えましたあなたの質問！