一种清除：悬停在触摸屏下拉菜单中的方法？答案

【问题标题】：A way to clear a :hover in a drop-down menu on a touch-screen?一种清除：悬停在触摸屏下拉菜单中的方法？
【发布时间】：2014-03-14 00:46:12
【问题描述】：

我有一个非常标准的 CSS 下拉菜单，使用 :hover 来显示子元素，并使用 Doubletap 插件来捕获和清除触摸事件以允许子菜单元素在触摸设备上显示。

现在，我希望能够在用户点击十字时“关闭”打开的菜单项。到目前为止，我所拥有的是：

默认情况下隐藏交叉。
当父 li 悬停时，Cross 变得可见

但我还需要的是：

点击交叉时，父级：悬停状态被清除（将菜单返回到初始状态）。

Here's my JSFiddle 这是我的标记：

 <ul id="main-menu">
            <li class="parent" aria-haspopup="true"><a href="#">Item One</a>
                <span class="tapclose">X</span>
                <!-- sub-menu -->
            </li>
            <li class="parent" aria-haspopup="true"><a href="#">Item Two</a>
                <span class="tapclose">X</span>
                <!-- sub-menu -->
            </li>
  </ul>

最好的方法是什么？菜单需要在基于触摸和鼠标的界面上工作。我对 JQuery、CSS 和标记解决方案持开放态度。

【问题讨论】：

我无法真正回答，但我们使用 :hover、:focus 和 :active，因此您可以使用鼠标、键盘选项卡和触摸我们的菜单。
这个问题之前有人问过：stackoverflow.com/questions/14068773/…

标签： jquery html css

【解决方案1】：

最好的方法是什么？

这是一个很难回答的问题，因为尽管有多种方法可以实现您正在尝试做的事情，但每种方法都有其优点和缺点，并且它将永远开放给基于意见的辩论。所以我敢说没有最好的方法来做到这一点，但肯定有些方法可能更合适或更清洁

我个人认为 jQuery 让一切变得如此简单，而且是很好的探索。但是，我并不是说这是最好的方法。实际上，我在JS Fiddler

中整理了一个简约的示例，展示了它可以很好地处理这些类型的菜单的潜力。

我在哪里使用这个 html 结构...

<nav>
    <div class="l1">Item 1
        <div class="l2">
           <div>Sub Item 1.1</div>
           <div>Sub Item 1.2</div>
        </div>
    </div>
    <div class="l1">Item 2 
        <div class="l2">
           <div>Sub Item 1.1</div>
           <div>Sub Item 1.2</div>
        </div>
    </div>
    <div class="l1">Item 3
        <div class="l2">
           <div>Sub Item 1.1</div>
           <div>Sub Item 1.2</div>
        </div>
    </div>
    <div class="l1">Item 4
        <div class="l2">
           <div>Sub Item 1.1</div>
           <div>Sub Item 1.2</div>
        </div>
    </div>
</nav>

考虑改用ul 和li 元素。我也在使用这个样式表...

nav{
    display:block;
    height:25px;
    padding:10px 50px;
    background-color:black;
    color:yellow;
    font-weight:bold;
}
nav div.l1{
    margin-right:20px;
    display:inline-block;
    zoom:1;
    *display:inline;
}
nav div.l2{
    display:none;
    background-color:yellow;
    color:black;
    position:absolute;
    margin-top:16px;
    z-index:1;
    padding:20px 10px;
}

最后是这个 jQuery...

$(function(){
    $('div.l1').click(toggleSubItems);
});

function toggleSubItems(){
    $('div.l2').not($(this).children('div.l2')).hide();
    $(this).children('div.l2').toggle(400);
}

请注意，所有关注点都很好地分开...javascript、html、css。但同样，以此为例来展示其扩展潜力，而不是作为您项目的模板。

希望对你有帮助

【讨论】：