列表不會再出現在窗口調整大小

Question

我有一個下拉菜單，我使用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/

任何幫助將是很大的一個ppreciated。

Answer 1

我發現，最好的解決方法是一個removeAttr添加到windowResize函數，如下所示：

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

這消除了顯示：無原因由移動視圖當窗口被調整爲桌面大小，但允許在移動視圖中再次應用它。

Answer 2

你可以使用這個小片段，以「不應用」的風格=「顯示：無;」這可能會應用到您的列表中，並且不會在調整大小時將其刪除。這會將其重置爲「顯示:(這裏什麼都沒有）;」當窗口的大小超過768像素時。

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

希望這有助於！