Question

我有一个使用CSS和jQuery响应的下拉菜单。如果窗口收缩，移动导航就会显得很好，但是如果展开并关闭菜单，然后调整窗口大小，桌面导航就不会再出现，因为内嵌显示：无滑动添加。我无法弄清楚，对于我的生活，当窗口大小再次增加时，如何让菜单重新出现。

HTML

<div class="nav">
        <div class="mobile-nav">Navigation</div>
        <ul class="primary">
            <li><a href="#link">Link</a></li>
            <li><a class="has-drop">Link w/ Children <span></span></a>
                <ul class="drop">
                    <li><a href="#link">Link</a></li>
                    <li><a href="#link">Link</a></li>
                    <li><a href="#link">Link</a></li>
                    <li><a href="#link">Link</a></li>
                    <li><a href="#link">Link</a></li>
                </ul>
            </li>
            <li><a class="has-drop" href="#link">Link w/ Children <span></span></a>
                <ul class="drop">
                    <li><a href="#link">Link</a></li>
                    <li><a href="#link">Link</a></li>
                    <li><a href="#link">Link</a></li>
                    <li><a href="#link">Link</a></li>
                    <li><a href="#link">Link</a></li>
                </ul>
            </li>
            <li><a href="#link">Link</a></li>
            <li><a href="#link">Link</a></li>
        </ul>
        <div class="clear"></div>
    </div>

CSS

.clear{clear:both}
.nav{display:block;width:100%;background:#222}
.mobile-nav{visibility:hidden;padding:0;height:0;background:#222}
ul.primary{background:#222;list-style:none;height:45px;min-width:350px;position:relative;margin:10px 0 0 0;padding:0;float:right;display:block}
ul.primary li{float:left;display:inline;font-weight:bold;font-size:13px;max-width:100%}
ul.primary li a,ul.drop li a{display:block;padding:10px;color:white;text-decoration:none}
ul.drop li a{padding:5px}
ul.primary li a:hover,ul.drop li a:hover{background:#444}
ul.primary li,ul.drop li{font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif}
ul.primary li.active>a{background:#444}
a.has-drop{cursor:pointer}
a.has-drop span{margin:-8px 0 0 5px;width:10px;height:5px;float:right;background:url("drop-caret.png") no-repeat center right}
li.active>a.has-drop span{margin:-8px 0 0 5px;width:10px;height:5px;float:right;background:url("drop-caret-up.png") no-repeat center right}
ul.drop{display:none;z-index:999;position:relative;margin:0;padding:0;min-width:100%;width:auto;list-style:none;background:#242424;border:0}
ul.drop li{float:none;font-weight:normal}
@media only screen and (max-width:767px){
nav{display:block;width:100%;border:0 solid white;padding:10px 0}
.mobile-nav{visibility:visible;height:auto;margin:0 5px;padding:10px 0;font-weight:bold;color:white;cursor:pointer;background:url("mobile-nav.png") no-repeat center right}
ul.primary{float:none;display:none;height:auto;margin:0;padding:0}
ul.primary li{display:block;float:none;border-bottom:1px solid #444}
ul.primary li:last-child{border-bottom:0}
ul.drop li,ul.primary li.active{border-bottom:0}
ul.drop li a{text-indent:15px;font-size:12px;font-style:italic}
a.has-drop span{margin:5px 0 0 5px;width:10px;height:5px;float:right;background:url("drop-caret.png") no-repeat center right}
li.active>a.has-drop span{margin:5px 0 0 5px;width:10px;height:5px;float:right;background:url("drop-caret-up.png") no-repeat center right}}

的jQuery

var $j = jQuery.noConflict();
$j(document).ready(function () {
$j('ul.primary li').click(function () {
var a = this;
if ($j('ul', this).is(':visible')) {
    $j('ul', this).slideUp(function () {
        $j(a).removeClass('active')
    })
} else {
    $j('ul.drop').slideUp();
    $j('ul.primary li').removeClass('active');
    $j('ul', this).slideDown();
    $j(a).addClass('active')
}
});
$j('body').click(function (a) {
if (!$j(a.target).is('a')) {
    $j('ul.drop').slideUp();
    $j('ul.primary li').removeClass('active')
}
});
$j(function () {
$j('.mobile-nav').click(function (e) {
    $j('.primary').slideToggle(150, "swing");
    e.stopPropagation()
});
$j(window).resize(function() {
    $j('ul.drop').slideUp();
    $j('ul.primary li').removeClass('active')
});
})
});

这是完整的标记和jQuery：http://jsfiddle.net/mhXkM/

非常感谢任何帮助。

Answer 1

您可以使用此小片段“取消应用”style =“display：none;”这可能会应用于您的列表，而不会在调整大小时删除。这会将其重置为“display :( nothing here）;”当窗口调整大小超过768像素。

$(function(){
     $(window).resize(function(){
         if($(this).width() >= 768){
             $('#your-element-name').css('display', '');
         }
      })
      .resize();

希望这有帮助！

Answer 2

我找到的最佳解决方案是将一个removeAttr添加到windowResize函数中，如下所示：

$j(window).resize(function() {
$j('ul.drop').slideUp();
$j('ul.primary li').removeClass('active')
});

这会删除显示：当窗口调整为桌面大小时移动视图无法显示，但如果在移动视图中查看，则允许再次应用。

窗口调整大小时不会再出现列表

2 个答案: