0

ドロップダウン メニューを探しています ( onlcick )

何度も検索した後、ついに見つけました

しかし問題は、私が持っているコードが（ hover ）ではなく（ 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が表示されているかどうかをチェックし、反対の表示値を持たせます。親の li+'menu' と同じ ID を uls に与えれば、すべてのメニューに同じ関数を使用できます。

  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 に答える