Question

希望这是一个简单的解决方法......

我在响应式网页设计中使用jQuery移动菜单 - 当我对响应性进行测试时（通过挤压浏览器窗口）一切正常。当我将其拉回到全宽时，下拉菜单显示为打开状态。如果我将鼠标悬停在页面上或刷新页面，它们就会消失......

非常感谢任何帮助。

CSS：

<pre>

.menu {
    float: right;
    clear: right;
    margin: 29px 0 0;
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 400;
    float: right;
}

.menu ul li {
    margin: 0;
    padding: 0;
}

.menu > ul,.menul ul > li > ul {
    list-style: none;
    position: relative;
}

.menu > ul > li {
    float: left;
    margin: 0 0 0 20px;
    padding-top: 6px;
}

.menu > ul > li > a {
    color: #888;
    display: block;
    font-size: 16px;
    padding: 0 0 2px;
    text-decoration: none;
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}

.menu > ul > li:hover > a,.menu > ul > li.active > a {
    border-bottom: 2px solid #8dc63f;
    text-decoration: none;
    color: #fff;
}

.menu > ul > li > ul {
    background: url(drop-bg.png);
    position: absolute;
    font-size: 11px;
    padding: 0;
    min-width: 220px;
    display: none;
}

.menu > ul > li:hover > ul {
    display: block;
}

.menu > ul > li ul li a {
    color: #999;
    display: block;
    line-height: 24px;
    padding: 5px 20px;
    text-decoration: none;
    text-shadow: none;
}

.menu > ul > li ul li a:hover {
    background: #83ba3a;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 1px 1px #000;
}
</pre>

Link to Mobile Menu JS
Link to Live Website

提前致谢！

Answer 1

正在发生的事情是您的菜单（包括子菜单）被设置为显示：当页面扩展回桌面宽度时阻止。尝试这样的事情：

//otherwise, hide the mobile menu
if(!isMobile() && menuExists()){
    $('.mnav').hide();
    $menus.show();
    $menus.find('ul.sub-menu').css('display', 'none');
}

Answer 2

原来我只需要添加'＆gt;'到我的JS：

$('.menu > ul').mobileMenu();

问题是当浏览器窗口被放大时我也在激活下拉列表。

执行响应测试后，下拉菜单会打开

2 个答案: