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>

LESS

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/

的更详细文章

导航下拉列表 - 悬停并单击

1 个答案: