單擊時隱藏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

單擊項目時，可以在調用的函數內使用JQuery $(".menubar").toggle()函數。 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;
}