Question

任何想法如何在点击任何项目时隐藏此下拉列表？把它恢复到休息状态？我希望它主要隐藏在移动用户中。它现在工作正常，但在移动设备上它保持打开状态，直到页面的另一个元素发生在＃34;被点击。

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

之类的东西

Answer 2

请提供此CSS for mobile css

   .menubar{
            display:none;
}

点击隐藏CSS菜单

2 个答案: