javascript - 更改 :hover on iPad So First Touch is Registered as onclick and :hover Functionailty Still Works

Question

我正在移植网页以在 iPad 上工作(因为这是公司使用的)。在桌面上，我使用 :hover 来导航菜单。在 iPad 上，我需要能够单击菜单项以展开菜单(效果很好)。我添加了一个 onclick 事件，该事件应该显示一个允许折叠菜单的按钮。该按钮应该在菜单展开后立即出现，但是直到第二次单击菜单项才注册点击事件，因此该按钮最初不会出现。所以这是顶部导航菜单的悬停。第一次触摸列表项时，此 (:hover) 有效。

#nav li:hover {
background-color:#80CCFF;
color:black;
opacity:1;
}
#nav li:hover > ul.child {

top:39px; 
display:inline;
position:absolute;
text-align:left;

这是导航 html 的顶部:

<ul id="nav">

    <input  id="button1" style="margin-bottom:10px;" class="button1class" name="Button1" type="button" value="Collapse Menu" onclick="hidebutton();return false;"/>

<li class="green"><a id="close" href="" onclick="showiframe(this.id); return false;">Development</a>

这里是 javascript showiframe() 的片段:

else {

    document.getElementById("theiframe").style.display = "none";
    document.getElementById("button2").style.display = "none";
    document.getElementById("button1").style.display = "block";
}

总而言之，在第二次单击之前不会调用 onClick，我知道这是 Safari 在看到 :hover 时应该如何工作。我想做的是编写代码，这样就没有 :hovers，一切都像有 :hovers 一样工作，这意味着菜单会根据需要展开，并且在第一次点击时会感应到 onclick。

Answer 1

<ul id="nav">

    <input  id="button1" style="margin-bottom:10px;" class="button1class" name="Button1" type="button" value="Collapse Menu" onclick="hidebutton();return false;"/>

<li class="green"><a id="close" href="" onclick="showframe(this.id); return false;">Development</a>

试试这个代码