0

我正在寻找下拉菜单（onlcick）

经过多次搜索，我终于找到了一个

但问题是，我拥有的代码是基于（悬停）而不是（onclick）

我想通过 javascript 或 css 将代码转换为 onclick 而不是悬停

我的代码：

<style>
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}
</style>
<ul class="dropdown">
    <li><a href="./" class="dir">Download Drivers</a>
        <ul>
            <li><a href="./">Download Drivers</a></li>
            <li><a href="./">Driver Widget</a></li>
            <li><a href="./">NVIDIA Software</a></li>
        </ul>
    </li>
    <li><a href="./">Shop</a></li>
    <li><a href="./" class="dir">Products</a>
        <ul>
            <li><a href="./">Desktop</a></li>
            <li><a href="./">Workstation</a></li>
            <li><a href="./">Servers</a></li>
            <li><a href="./">Motherboard</a></li>
        </ul>
    </li>
    <li><a href="./" class="dir">Technologies</a>
        <ul>
            <li><a href="./">NVIDIA SLI</a></li>
            <li><a href="./">NVIDIA Hybrid SLI</a></li>
        </ul>
    </li>
</ul>

</body>
</html>
4

2 回答 2

6

这是你想要的效果吗？在这里看小提琴：http: //jsfiddle.net/UQwJz/4/ [编辑]

我重新发明了你的 CSS 并让它变得更简单。

于 2012-06-27T14:50:28.940 回答
1

1）修改你想要下拉的菜单的css，添加一个display:none;（这将使它们不显示）

2）将一个分配id给根菜单项，另一个可以使用第一个构建到根项下的列表（您想要下拉的）

3）在同一个元素声明中，有onclick=dropdown(). 例子

<li id='menu1' onclick=dropdown()><ul id='menu1menu' >这将在单击该元素时调用下拉功能。

<li><a href="./" id='drivers' onclick=dropdown() class="dir">Download Drivers</a>
    <ul id='driversmenu'>
        <li><a href="./">Download Drivers</a></li>
        <li><a href="./">Driver Widget</a></li>
        <li><a href="./">NVIDIA Software</a></li>
    </ul>
</li>

4）有这个功能：点击时，该功能会检查li下的ul是否显示，然后使其具有相反的显示值。您可以对所有菜单使用相同的功能，前提是您为 uls 提供与父 li+'menu' 相同的 id。

  function dropdown()
        {
            if(document.getElementById(window.event.srcElement.id+'menu').style.display=='block'){
                document.getElementById(window.event.srcElement.id+'menu').style.display='none';
            }
            else{ 
                document.getElementById(window.event.srcElement.id+'menu').style.display='block';
            }
        };
于 2012-06-27T14:17:59.163 回答