2013-07-25 74 views
0

我正在使用辅助导航功能,当用户将鼠标悬停在主导航标题上时,会下降。我希望这些下拉菜单更像是一个“正常”下拉菜单,点击后它就会消失。点击隐藏子导航上的UL

通常情况下,这不是问题,但由于此站点依赖于二级导航的锚定链接,所以下拉列表在使用后仍然存在。这并不是非常讨厌本身,但我更喜欢它更像人们普遍预期的下拉式行为。

不幸的是,我使用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; 
} 

无论如何,感谢检查出来,并任何帮助你可能会给。

回答

0

是jQuery的一个选项吗?你标记并提到它,但你似乎没有使用它。我认为

click() 

hover() 

功能会派上用场这样的事情。我用一个例子来说明它如何工作:

http://jsfiddle.net/4UVfk/