Javascript 更改：将鼠标悬停在iPad上，以便第一次触摸注册为onclick，并且：悬停功能仍然有效

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

}

以下是导航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>

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

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

---

尝试使用此代码

您没有改变我所拥有的任何内容。

else {

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

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