1

現在、いくつかのドロップダウンを備えた純粋な HTML CSS ナビゲーション バーがあります。ただし、iPadではホバーは明らかに機能しません。

関連するメニュー項目にクリック イベントを追加して、ドロップダウンが onclick イベントでもアクティブになるようにします。

私は他の回答を見てきましたが、特定のサイト用に変更できるように、JavaScriptを十分に読むことができません。

ここに私が今いる場所へのリンクがあります: http://2ftrade.nl/kareem/eindopdracht/

これは関連するhtmlです。私のcssでは、ドロップダウンメニューのデフォルトはdisplay:noneであり、それを含むliにカーソルを合わせるとdisplay:blockに変更されます。

        <ul>
            <li><a href=" " title="">Home</a></li>
            <li><a title="">Opleiding</a> 

                <!-- the dropdown -->
                <ul>
                    <li><a href="#" title="">Visie &amp; Beleid</a></li>
                    <li><a href="#" title="">Opbouw Studieprogramma</a></li>
                    <li><a href="#" title="">Competenties</a></li>
                    <li><a href="#" title="">Diploma</a></li>
                    <li><a href="#" title="">Beroepen</a></li>
                </ul>

            </li>
            <li><a href="#" title="">Onderwijsprogramma</a></li>
            <li><a href="#" title="">Organisatie</a></li>
            <li><a title="">Stages en Projecten</a>

                <!-- another dropdown -->
                <ul>
                    <li><a href="#" title="">Stages</a></li>
                    <li><a href="#" title="">Projecten</a></li>
                </ul>

            </li>
            <li><a href="#home">Top</a></li>
        </ul>

これは、ドロップダウン セクションを非表示にする css です。

nav > ul > li > ul {
            display: none;
            position: absolute;
        }

これは、ホバリング時に表示されるものです

 nav > ul > li:hover ul {
            display: block;
        }
4

3 に答える 3

1

イベントリスナーを要素にアタッチできます：

var dropdown_button = document.getElementById('#your-button-that-activates-dropdown');

dropdown_button.addEventListener('click', function() {
  //here do what you want to do when the button is clicked.
}, false);
于 2013-04-07T11:08:32.277 に答える
0

次のような JavaScript イベントを使用する必要があります。

var btn = document.getElementById('btn') // this button is a key to run what you want
var drp = document.getElementById('drp') // this is your dropdown list
btn.onclick = function()
{
    drp.style.display = 'block'
    // other codes . . .
}
于 2013-04-07T11:16:24.587 に答える