使用纯JavaScript激活下拉菜单

Question

Right now I have a pure HTML CSS navigation bar with some dropdowns. However on ipad the hover will obviously not work.

I want to add a click event to the relevant menu items so the dropdown will also activate with an onclick event.

I've look at other answers but I'm not capable of reading javascript well enough so that I can modify them for my specific site.

here is a link to where I'm at now: http://2ftrade.nl/kareem/eindopdracht/

and this is the relevant html. In my css the default is display:none for the dropdown menus and is changed to display:block when hovered over the li that contains it.

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

This is the css that hides the dropdown section

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

and this is what will display it when hovering

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

Answer 1

you can attach event listener to your element:

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

you should use javascript events , some thing like this :

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

You can achieve this without using javascript.

Use the :target selector

example

Add an id and href for each target in the html

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

in the css specify the style for the :target

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

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