2

如果您从 iPad http://morsapera.com/rb/HTML-Files/home.html访问此网页并单击它显示下拉列表的任何菜单项。

我希望当用户单击菜单外的任何位置时隐藏下拉菜单。我已经部分做到了，现在如果您单击菜单下方的图像，它会隐藏下拉菜单，但当您单击标题中的任何位置时它仍然存在。

4

3 回答 3

2 
    jQuery(document).on('touchstart', function(event) {
        if ( !jQuery(event.target).closest("#navi ul").length) {
            jQuery("#navi ul").fadeOut();
       }
于 2014-02-24T20:10:49.187 回答
0

多年来，我一直在为触摸设备上的纯 CSS 下拉菜单苦苦挣扎。但是，几天前我发现了这个很棒的 jQuery 插件。

我真的建议您删除您的旧想法，将此脚本包含到您的项目中，并且只需一行代码就可以幸运:)

$('#navi li:has(ul)').doubleTapToGo();

编辑 不幸的是，jsFiddle 要么关闭要么维护（周二补丁）。我测试了多达 4 个级别的 jQuery 插件，它完美无缺！！！！

这是一大堆代码，但正如我所说，jsFiddle 目前不起作用。

<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="doubletaptogo.js"></script>
    <script>
        $(document).ready(function() { console.log('ready'); $('li:has(ul)').doubleTapToGo();});
    </script>
    <style>
        * {
            margin:0px;
            padding:0px;
        }
        body * {
            display:block;
        }
        ul li {
            width:200px;
            height:100px;

            float:left;
            position:relative;

            background-color:red;
        }
        ul li ul {
            top:100px;
            left:0px;
            display:none;
            position:absolute;
        }
        ul li:hover > ul {
            display:block;
        }
        ul li ul li {
            position:relative;
            background-color:green;
        }
        ul li ul li ul {
            top:0px;
            left:200px;
            width:10000px;
        }
        ul li ul li ul li {
            float:left;
            position:relative;
            background-color:blue;
        }
        ul li ul li ul li ul {
            top:100px;
            left:0px;
            width:200px;
        }
        ul li ul li ul li ul li {
            background-color:yellow;
        }
        ul li ul li ul li:hover > ul {
            display:block;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            test 1
        </li>
        <li>
            test 1
            <ul>
                <li>
                    test 2.1
                    <ul>
                        <li>
                            test 2.1
                        </li>
                        <li>
                            test 3.2
                        </li>
                    </ul>
                </li>
                <li>
                    test 2.2
                    <ul>
                        <li>
                            test 3.1
                        </li>
                        <li>
                            test 3.2
                            <ul>
                                <li>
                                    test 3.1
                                </li>
                                <li>
                                    test 3.2
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
于 2013-08-05T22:37:12.947 回答
0

将其放入菜单的单击处理程序中：

event.stopPropagation();

然后把它放在你的 init 函数或者我想的任何地方：

$(document).on('click', function(){
  //REMOVE CLASS THAT MAKES MENU SHOW OR WHATEVER
});
于 2013-08-05T22:39:05.247 回答