0

我正在一个带有辅助导航的网站上工作，当用户将鼠标悬停在主导航标题上时，该导航会下拉。我希望这些下拉菜单的行为更像一个“正常”下拉菜单，即它在被点击时消失。

通常，这不会是一个问题，但由于该站点依赖于辅助导航的锚定链接，因此下拉菜单在使用后仍然存在。它本身并不是很烦人，但我希望它表现得更像人们通常期望下拉菜单的行为。

不幸的是，我在 jQuery/javascript 方面的能力不足，而且我的能力不足。

任何帮助将不胜感激。

这是Java脚本：

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;
}

无论如何，感谢您的检查，以及您可能提供的任何帮助。

4

2 回答 2

0

jquery 适合您吗？您标记并提到了它，但您似乎没有使用它。我觉得

click()

和

hover()

对于这样的事情，函数会派上用场。我在这里整理了一个快速小提琴，并举例说明了它是如何工作的：

http://jsfiddle.net/4UVfk/

于 2013-07-25T20:41:12.587 回答
0

尝试使用 onclick 的 JavaScript 函数。您可以将此作为参考：display:none; 在浏览器中显示“无”

于 2013-07-25T20:25:46.153 回答