0

我正在尝试重写我的网页以在智能手机上正确显示。在我的测试中，当鼠标移出下拉菜单的 div 时，我无法让下拉菜单消失。下面是我的代码：

   <script type="text/javascript">
    function expandMenu() {
        document.getElementById("moreMenu").style.display = "block";
    }

    function hideMenu() {
        document.getElementById("moreMenu").style.display = "none";
    }

</script>

.......

  <div  class="medianfont"><a href="news/pastnews.aspx">News &nbsp; - </a><a href="email.aspx"> Email &nbsp; - </a><a href="pastedit.aspx">Editorials &nbsp; - </a>
  <span style="cursor:pointer; color:blue" onclick="expandMenu()"> More</span><br />
    <div id="moreMenu" style="display:none; margin-left:14em;" onmouseout="hideMenu()" onclick="hideMenu()">
        <a href="histart.htm">History </a><br />
        <a href="calendar.aspx">Events </a><br />
    </div>
</div>

在我的桌面上测试时它可以正常工作，但在我的 Android 手机上测试时，会出现下拉菜单，但即使链接有效，点击量也不会消失。那么有没有办法让下拉菜单在类似于桌面的智能手机上消失？我不是在 Android 中编码，我只是在智能手机上显示网页。

4

1 回答 1

0

因为没有鼠标，所以移动设备没有 mouseout。

建议使用移动框架或至少阅读可用事件。

http://api.jquerymobile.com/category/events/

https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Touch_events

使用模糊怎么样？

这是一个使用模糊的演示。我在 Android 设备上对此进行了测试。

HTML

<div id="menu" onclick="expandMenu();" onblur="hideMenu();">Menu</div>
<div id="moreMenu" tabindex="-1" onblur="hideMenu();">
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
</div>

JavaScript（无 JQuery）

function expandMenu() {
    document.getElementById("moreMenu").style.display = "block";
    document.getElementById("moreMenu").focus();

}

function hideMenu() {

    document.getElementById("moreMenu").style.display = "none";
}

CSS

#moreMenu {
    width:100px;
    height:400px;
    border: 1px solid blue;
    display: none;
    outline: none;
}

#menu {
    outline: none;
    background: #e5e5e5;
    width: 100px;
}

请参阅 jsFiddle 演示...

于 2013-08-31T20:41:51.053 回答