Question

问题，答案

我知道这听起来像是一个常见的问题，我做了很多搜索，但我找不到问题的答案。我们假设我有这个代码

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test Page</title>
        <style>
            nav{ background:yellow; }
            nav ul:before{content:"Menu";}
            nav ul>li{display:none;}
            nav ul:hover>li{display:block;}
        </style>
    </head>
    <body>
        <h1>Test Page</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
                <li><a href="/search">Search</a></li>
            </ul>
        </nav>
        <main>Content here!</main>
        <script src="//cdn.jsdelivr.net/jquery/1.8.3/jquery.min.js"></script>
        <script>
            $("nav").on("click","a",function(e){
                var link = this;
                $.ajax({
                    url: link.href,
                    dataType:"html",
                    success:function( data, textStatus, jqXHR ) {
                        $("main").html(data);
                    },
                    error: function( jqXHR, textStatus, errorThrown ){
                        console.log(textStatus);
                    }
                });
                e.preventDefault();
            });
        </script>
    </body>
</html>

这在移动设备上运行良好，但如果移动网站使用ajax加载内容，则菜单将保持打开状态，直到用户点击为止。我想要的是，当他们点击链接时菜单会崩溃。

使用单独的类来管理悬停效果然后通过javascript应用它不起作用，因为只要加载新内容我就需要重新应用将鼠标悬停在导航上的可能性，这只会导致导航如果用户没有点击原始菜单悬停，则打开备份。

有什么想法吗？到目前为止，我最好的解决方案是在js中管理悬停并添加css的后备选项，因此在没有js的移动设备上的用户（实际上它不能很多）将不得不点击离开以关闭导航。

更新...无效

我相信我已经提出了一个有效的解决方案。它并不完美，但却能满足我的需求。我把它添加到准备好的文件

$('nav').on("touchstart","ul",function(){
    $('li',this).css('display', 'block');
}).on("mouseenter","ul",function(){
    $('li',this).css('display', 'block');
}).on("mouseleave","ul",function(){
    $('li',this).css('display', 'none');
})

然后再到点击事件

$('nav ul:hover>li').css('display', 'none');

最终更新，正常工作

我以前的更新实际上并没有像我想象的那样正常工作。从纵向到横向以及在完整桌面上都有问题。所以，经过一些更多的工作，我找到了另一种更好的方法。我正在构建的网站使用headjs，我可以专门为移动设备应用样式。

完全无视我之前的更新，将此代码添加到loadpage函数

$('.mobile nav ul').addClass('collapse');

此代码点击功能

$('.mobile nav').on("touchstart","ul",function(){
    $(this).removeClass("collapse");
})

这个类到样式表

.mobile nav ul.collapse>li{display:none;}

我能够克服这个问题。

如何使用Javascript / JQuery删除移动设备上的悬停状态

0 个答案: