单击触摸设备上的其他位置时关闭 CSS 下拉菜单答案

【问题标题】：Close CSS dropdown menu on click elsewhere on touch devices单击触摸设备上的其他位置时关闭 CSS 下拉菜单
【发布时间】：2014-11-12 09:03:43
【问题描述】：

虽然之前有人问过这个问题，但我还没有在任何地方找到可行的解决方案，所以这里......

我在响应式网站上有一个普通的纯 CSS 导航菜单和子菜单（使用 :hover）。一切正常，除了在触摸设备上，如果您打开子菜单并决定不点击链接，即使您触摸页面上的其他地方，它也不会关闭。

有没有办法让子菜单在点击其他地方时关闭触摸设备，但保留桌面用户的 :hover 功能？

谢谢！

PS。我对 JS 和 jQuery 非常陌生，因此非常感谢您提供示例答案！

【问题讨论】：

为什么不使用onclick方法？
我将如何为仅触摸设备执行此操作，同时将悬停留在桌面？
您可以通过使用 JQuery 指定屏幕大小来做到这一点。例如，如果你只想要平板电脑，你可以这样做if ( $(window).width() < 739) { //Add your javascript for large screens here }
触控设备没有“:hover”模式。因此，您使用其他东西来“激活”您的“CSS 下拉菜单”。是吗？
@Yevgeniy Afanasyev - 感谢您的回答和评论，但是由于模拟悬停的触摸事件，即使在触摸设备上它也会（技术上）激活“悬停”。所以打开下拉菜单不是问题，但关闭触摸是。希望这是有道理的......

标签： javascript jquery css drop-down-menu touch

【解决方案1】：

如果您将使用“单击其他任何地方”来关闭菜单，它不会影响“悬停”功能，但这两种隐藏菜单的方式会相互竞争。这意味着您有一个额外的限制 - “确保它在处理点击时可见”。使用这个：

if($('#hover_settings').is(":visible")){
                //do something
}

假设您在主窗体上有“#button_settings”，而“#hover_settings”菜单变为可见或隐藏。您单击“#button_settings”以隐藏和显示“#hover_settings”，除非您决定具有相同的效果来隐藏“#hover_settings”以防止单击其他任何位置，但在“#hover_settings”内。

首先 - 如何隐藏“#hover_settings”？

        $(document).click(function() {
            if($('#hover_settings').is(":visible")){
                $('#button_settings').click();
            }
        });

第二个 - #button_settings - 它应该如何工作？

        $('#button_settings').click(function(){
            var $hs = $('#hover_settings');
            if($hs.is(":visible")){                 
                $hs.hide({effect: "slide", direction : 'up'}, 500);
            }else{
                $hs.show({effect: "slide", direction : 'up'}, 500);                 
            };
            return false;
        });

第三 - 限制 - 因为您有一个菜单，并且您可能会在单击每个元素后预期两种行为变体

a) 执行操作并关闭菜单 - 您无需执行任何操作。

b) 执行操作并保持菜单打开 - 您需要在没有传播的情况下完成此点击功能，尝试这样做：

return false;

或

e.stopPropagation();

【讨论】：