导航下拉菜单 - 悬停并单击答案

【问题标题】：Nav Dropdown - Hover and Click导航下拉菜单 - 悬停并单击
【发布时间】：2014-04-11 13:11:23
【问题描述】：

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

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

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

什么是最好的解决方案？

我正在使用引导程序 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;
                    }
                }
            }
      }
 }

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

【问题讨论】：

标签： jquery html css less

【解决方案1】：

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

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

【讨论】：