javascript - 单击时隐藏 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();});

你也可以使用像 bootstrap 这样的东西:http://getbootstrap.com/components/#navbar