Question

我正在尝试重写我的网页，以便在智能手机上正常显示。在我的测试中，当鼠标移出下拉菜单的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编码，我只是在智能手机上显示网页。

Answer 1

由于没有鼠标，因此没有鼠标移动设备。

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

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

See jsFiddle Demo...

Mouseout无法在Android网页上运行

1 个答案: