Скрыть меню CSS по щелчку

Question

Любая идея, как я могу скрыть это раскрывающееся меню, когда на него нажимают? вернуть его в состояние покоя? Я хочу, чтобы он был скрыт в основном для мобильных пользователей. Он отлично работает, как сейчас, но на мобильных телефонах он остается открытым до тех пор, пока на него не будет нажат другой элемент страницы.

HTML

<div class="menubar"> 
<ul class="menu"> 
<li class="menu"><div onClick="loadPage('home.html');">HOME</div></li> 
<li class="menu"><div onClick="">PRODUCTS <img src="images/darrow.gif" border=0></div> 
    <ul class="menu"> 
    <li class="menu"><div onClick="loadPage('products.html');">View All Products</div></li> 
    <li class="menu"><div onClick="loadPage('cargolite.html');">Car-Go Lite</div></li> 
    <li class="menu"><div onClick="loadPage('cargolitextreme.html');">Car-Go Lite Xtreme</div></li> 
    <li class="menu"><div onClick="loadPage('pup.html');">P'Up</div></li> 
    <li class="menu"><div onClick="loadPage('twist.html');">Twist</div></li> 
    <li class="menu"><div onClick="loadPage('wazat.html');">Wazat</div></li> 
    </ul> 
</li> 
<li class="menu"><div onClick="">DOWNLOADS <img src="images/darrow.gif" border=0></div> 
    <ul class="menu"> 
    <li class="menu"><div onClick="loadPage('brochures.html');">Brochures</div></li> 
    <li class="menu"><div onClick="loadPage('manuals.html');">Manuals</div></li> 
    </ul> 
</li> 
<li class="menu"><div onClick="">DEALERS <img src="images/darrow.gif" border=0></div> 
    <ul class="menu"> 
    <li class="menu"><div onClick="loadPage('dealers_us.html');">United States</div></li> 
    <li class="menu"><div onClick="loadPage('dealers_ww.html');">Worldwide</div></li> 
    </ul> 
</li> 
<li class="menu"><div onClick="loadPage('about.html');">ABOUT</div></li> 
<li class="menu"><div onClick="loadPage('contact.html');">CONTACT US</div></li> 
</ul> 
</div> 

CSS

ul.menu {z-index: 1000; text-align: center; margin: 0; padding: 0px; list-style: none; display: inline; color: #FFFFFF;} 
ul.menu li.menu {z-index: 1000; color: #FFFFFF; line-height: 40px; padding-left: 15px; padding-right: 15px; font-family: Arial, 

Helvetica, sans-serif; font-weight: bold; position: relative; background: #000000; cursor: pointer; display: inline-block;} 
ul.menu li.menu:hover{z-index: 1000; background: #505050; color: #FFFFFF;} 
ul.menu li.menu ul.menu{z-index: 1000; color: #FFFFFF; left: 0; padding:0; position: absolute; width: 160px; visibility: hidden; 

display: none; border: 1px #000000 solid; border-bottom: none;} 
ul.menu li.menu ul.menu li.menu{z-index: 1000; font-size: 12pt; padding: 4px; text-align: left; background: #F97300; display: 

block; color: #FFFFFF; border-bottom: 1px #000000 solid; line-height: 30px;} 
ul.menu li.menu ul.menu li.menu:hover{z-index: 1000; background: #E0E0E0; color: #000000;} 
ul.menu li.menu:hover ul.menu{z-index: 1000; display: block; visibility: visible; opacity: .8;} 

jsfiddle http://jsfiddle.net/omvvL5z5/1/

Answer 1

Используйте $(".menubar").toggle() функция JQuery внутри функции вы вызываете при нажатии на элемент. http://api.jquery.com/toggle/

Это код, который я попробовал на jsfiddle: Попробуйте три

<div class="menubar"> 
<ul class="menu"> 
<li class="menu"><div onClick="loadPage('home.html');">HOME</div></li> 
<li class="menu"><div onClick="" class = "button">PRODUCTS <img src="images/darrow.gif" border=0></div> 
    <ul class="menu"> 
    <li class="menu"><div onClick="loadPage('products.html');">View All Products</div></li> 
    <li class="menu"><div onClick="loadPage('cargolite.html');">Car-Go Lite</div></li> 
    <li class="menu"><div onClick="loadPage('cargolitextreme.html');">Car-Go Lite Xtreme</div></li> 
    <li class="menu"><div onClick="loadPage('pup.html');">P'Up</div></li> 
    <li class="menu"><div onClick="loadPage('twist.html');">Twist</div></li> 
    <li class="menu"><div onClick="loadPage('wazat.html');">Wazat</div></li> 
    </ul> 
</li> 
<li class="menu"><div onClick="" class = "button">DOWNLOADS <img src="images/darrow.gif" border=0></div> 
    <ul class="menu"> 
    <li class="menu"><div onClick="loadPage('brochures.html');">Brochures</div></li> 
    <li class="menu"><div onClick="loadPage('manuals.html');">Manuals</div></li> 
    </ul> 
</li> 
<li class="menu"><div onClick="" class = "button">DEALERS <img src="images/darrow.gif" border=0></div> 
    <ul class="menu"> 
    <li class="menu"><div onClick="loadPage('dealers_us.html');">United States</div></li> 
    <li class="menu"><div onClick="loadPage('dealers_ww.html');">Worldwide</div></li> 
    </ul> 
</li> 
<li class="menu"><div onClick="loadPage('about.html');" class = "button">ABOUT</div></li> 
<li class="menu"><div onClick="loadPage('contact.html');" class = "button">CONTACT US</div></li> 
</ul> 
</div> 

Тогда просто положить в другой JQuery

вместо того, что я сделал попробовать

$('.menu > ul > li').click(function() { 
$('.menu > ul.menu').toggle(); 
}); 
$('.button').hover(function(){$('.menu > ul.menu').show();}); 

Вы можете также используйте что-то вроде бутстрапа: http://getbootstrap.com/components/#navbar

Answer 2

Пожалуйста, дайте этот CSS для мобильного CSS

.menubar{ 
      display:none; 
}