使用純JavaScript激活下拉菜單

Question

現在，我有一個帶有一些下拉菜單的純HTML CSS導航欄。 但是，在ipad上，懸停顯然將無法工作。

我想將click事件添加到相關菜單項中，因此下拉菜單也將通過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;
        }

Answer 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);

Answer 2

您應該使用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 . . .
}

Answer 3

您無需使用javascript就可以實現這一目標。

使用:target選擇器

例

為html中的每個目標添加一個id和href

<ul>
    <li><a href=" " title="">Home</a></li>
    <li id="Opleiding">
    <a title="" href="#Opleiding">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 id="StagesenProjecten">
        <a href="#StagesenProjecten" 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中指定:target的樣式

nav > ul > li:target ul {
            display: block;
        }

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