ブートストラップ/ CSS垂直ナビゲーションバーには、サブメニューのonclickの代わりに、ホバー

Question

ブートストラップ/ CSS垂直ナビゲーションバーにサブメニューが表示されるはずのonclickの代わりに、ホバー

私はホバー上のサブメニューを表示する垂直ナビゲーション・バーを持っていますが表示されます。ホバーの代わりに私はそれをクリックして欲しい。純粋なCSS /ブートストラップでこれを行う方法はありますか？事前に

.navigation { 
 
    width: 300px; 
 
} 
 

 

 
.mainmenu, .submenu { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.mainmenu a { 
 
    display: block; 
 
    background-color: #CCC; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    color: #000; 
 
} 
 

 

 
.mainmenu a:hover { 
 
    background-color: #C5C5C5; 
 
} 
 

 
.mainmenu li:hover .submenu { 
 
    display: block; 
 
    max-height: 200px; 
 
} 
 

 
.submenu a { 
 
    background-color: #999; 
 
} 
 

 

 
.submenu a:hover { 
 
    background-color: #666; 
 
} 
 

 

 
.submenu { 
 
    overflow: hidden; 
 
    max-height: 0; 
 
    -webkit-transition: all 0.5s ease-out; 
 
}

<nav class="navigation"> 
 
    <ul class="mainmenu"> 
 
    <li><a href="">Home</a> 
 
    <ul class="submenu"> 
 
     <li><a href="">Tops</a></li> 
 
     <li><a href="">Bottoms</a></li> 
 
     <li><a href="">Footwear</a></li> 
 
     </ul></li> 
 
    <li><a href="">About</a> 
 
    <ul class="submenu"> 
 
     <li><a href="">Tops</a></li> 
 
     <li><a href="">Bottoms</a></li> 
 
     <li><a href="">Footwear</a></li> 
 
     </ul></li> 
 
    <li><a href="">Products</a> 
 
     <ul class="submenu"> 
 
     <li><a href="">Tops</a></li> 
 
     <li><a href="">Bottoms</a></li> 
 
     <li><a href="">Footwear</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="">Contact us</a></li> 
 
    </ul> 
 
</nav>

おかげで.....あなたが期待している動作を実現することができますjQueryの数行のコードを使用して

Answer 1

$(".mainmenu li").click(function(){ 
 
    $(".mainmenu li").removeClass('active'); 
 
    $(this).toggleClass('active'); 
 
});

.navigation { 
 
    width: 300px; 
 
} 
 

 

 
.mainmenu, .submenu { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.mainmenu a { 
 
    display: block; 
 
    background-color: #CCC; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    color: #000; 
 
} 
 

 

 
.mainmenu a:hover { 
 
    background-color: #C5C5C5; 
 
} 
 

 
.mainmenu li.active .submenu { 
 
    display: block; 
 
    max-height: 200px; 
 
} 
 

 
.submenu a { 
 
    background-color: #999; 
 
} 
 

 

 
.submenu a:hover { 
 
    background-color: #666; 
 
} 
 

 

 
.submenu { 
 
    overflow: hidden; 
 
    max-height: 0; 
 
    -webkit-transition: all 0.5s ease-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navigation"> 
 
    <ul class="mainmenu"> 
 
    <li><a href="#">Home</a> 
 
    <ul class="submenu"> 
 
     <li><a href="">Tops</a></li> 
 
     <li><a href="">Bottoms</a></li> 
 
     <li><a href="">Footwear</a></li> 
 
     </ul></li> 
 
    <li><a href="#">About</a> 
 
    <ul class="submenu"> 
 
     <li><a href="">Tops</a></li> 
 
     <li><a href="">Bottoms</a></li> 
 
     <li><a href="">Footwear</a></li> 
 
     </ul></li> 
 
    <li><a href="#">Products</a> 
 
     <ul class="submenu"> 
 
     <li><a href="">Tops</a></li> 
 
     <li><a href="">Bottoms</a></li> 
 
     <li><a href="">Footwear</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Contact us</a></li> 
 
    </ul> 
 
</nav>

。