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 回答
0

您可以在不使用 javascript 的情况下实现此目的。

使用:target选择器

例子

为 html 中的每个目标添加一个idandhref

<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;
        }
于 2013-04-07T12:16:39.420 回答