Question

现在我有一个带有一些下拉列表的纯HTML CSS导航栏。但是在ipad上，悬停显然不起作用。

我想在相关菜单项中添加点击事件，因此下拉列表也会在onclick事件中激活。

我看了其他答案，但我不能很好地阅读javascript，以便我可以为我的特定网站修改它们。

这是我现在所处位置的链接：http://2ftrade.nl/kareem/eindopdracht/

这是相关的html。在我的css中，下拉菜单的默认值为display：none，并且当在包含它的li上悬停时，更改为显示：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选择器

example

为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;
        }

使用纯javascript激活下拉列表

3 个答案: