我正在开发一个带有辅助导航的网站,当用户将鼠标悬停在主导航标题上时,辅助导航会下拉。我希望这些下拉菜单的行为更像一个“普通”下拉菜单,点击后它会消失。
通常,这不会成为问题,但由于该网站依赖于辅助导航的锚定链接,因此下拉列表在使用后仍然存在。它本身并不是很烦人,但我更希望它的行为更像人们通常期望的下拉菜单的行为。
不幸的是,我在 jQuery/javascript 方面的能力不足,而且我还不够。
如有任何帮助,我们将不胜感激。
这是 Javacript:
function closeList1() {
var list = document.getElementById("list1");
if (list.style.display == "block"){
list.style.display = "none";
}
}
function closeList2() {
var list = document.getElementById("list2");
if (list.style.display == "block"){
list.style.display = "none";
}
}
HTML...
<ul class="nav">
<li>
<a href="#first" onClick="closeList1">FIRST</a>
<ul class="first" onClick="closeList1" id="list1">
<li><a href="#firstone">ONE</a></li>
<li><a href="#firsttwo">TWO</a></li>
<li><a href="#firstthree">THREE</a></li>
<li><a href="#firstfour">FOUR</a></li>
</ul>
</li>
<li>
<a href="#second" onClick="closeList2">SECOND</a>
<ul class="second" onClick="closeList2" id="list2">
<li><a href="#secondone">ONE</a></li>
<li><a href="#secondtwo">TWO</a></li>
<li><a href="#secondthree">THREE</a></li>
<li><a href="#secondfour">FOUR</a></li>
</ul>
</li>
</ul>
和 CSS...
ul.nav li ul{
list-style:none;
padding: 0;
margin: 0;
position:absolute;
display: block;
left:-9999px;
}
ul.nav li ul li{
float:none;
padding: 0;
margin: 0;
display: block;
}
ul.nav li ul li a{
white-space: nowrap;
margin: 0;
padding: 0;
display: block;
}
ul.nav li:hover ul{
left:0;
top: 0;
}
无论如何,感谢您查看它,并感谢您提供的任何帮助。
最佳答案
尝试使用 onclick 的 JavaScript 函数。您可以将其用作引用:display:none; displays 'none' in browser
关于javascript - 单击时隐藏子导航 UL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17867564/