javascript - 使用纯 JavaScript 激活下拉菜单

Question

现在我有一个带有一些下拉菜单的纯 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;
        }

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