jquery - 导航下拉菜单 - 悬停并单击

Question

我有一个导航，鼠标悬停时会出现一个子导航。

这也需要在移动设备上工作，所以我认为实现此目的的最佳方法是在单击时使用 jquery。因此，当悬停在 - 在桌面上和点击 - 在移动设备上时，它会出现。

我已经实现了这个解决方案，但问题是，当用户将鼠标悬停在导航上然后单击它时，即使悬停关闭，导航也会保持打开状态。

最好的解决方案是什么？

我正在使用 bootstrap 2。

HTML

<ul>
<li class="n1">Nav 1</li>
<li class="n2">Nav 2</li>
<li class="n3">Nav 3
    <ul class="dropdown">
        <li>DropDown 1</li>
        <li>DropDown 2</li>
        <li>DropDown 3</li>
    </ul>
</li>

少

ul{
    li{
        &:last-child{

                &:hover {
                    border-bottom-color: white;
                    .nav-dropdown{
                        display: block;
                    }
                }
            }
      }
 }

JS

$('.dropdown').parent().on('click', function(){
        $('dropdown').toggle();
    });

Answer 1

最好的方法是在您的页面中包含 modernizr.js 并检测是否在支持触摸的设备上查看该页面。如果是这样，您可以添加适当的 jQuery 代码。

您可以在 http://www.hongkiat.com/blog/detect-touch-device-modernizr/ 上阅读更详细的文章