0

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

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/

任何帮助将不胜感激。

4

2 回答 2

2

您可以使用这个小片段来“取消应用”style="display:none;"可能应用于您的列表并且不会在调整大小时删除的内容。这将display: (nothing here);在窗口大小调整到超过 768 像素时将其重置。

$(function(){
     $(window).resize(function(){
         if($(this).width() >= 768){
             $('#your-element-name').css('display', '');
         }
      })
      .resize(); 
});
于 2012-12-09T01:21:45.457 回答
0

我发现的最佳解决方案是向 windowResize 函数添加一个 removeAttr ，如下所示：

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

这将删除 display: none 当窗口大小调整为桌面大小时由移动视图引起的，但如果在移动视图中查看，则允许再次应用它。

于 2012-11-29T18:09:53.827 回答