jquery - 一种清除 :hover in a drop-down menu on a touch-screen? 的方法

Question

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

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

1. 默认隐藏十字。
2. 当父 li :hovered 时，十字变为可见

但是我还需要的是:

1. 当点击十字键时，parent :hover 状态被清除(将菜单返回到初始状态)。

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 和标记解决方案持开放态度。

Answer 1

What's the best way to do this?

这是一个很难回答的问题，因为尽管有多种方法可以实现您想要做的事情，但每一种方法都各有利弊，并且将永远开放基于意见的辩论。所以我敢说没有最好的方法，但肯定有一些方法可能更合适或更清洁

我个人认为 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。但同样，以此为例来展示其扩展潜力，而不是作为您元素的模板。

希望对你有帮助