列表不会在窗口调整大小时重新出现答案

【问题标题】：List Does Not Reappear on Window Resize列表不会在窗口调整大小时重新出现
【发布时间】：2020-07-04 16:45:30
【问题描述】：

我有一个使用 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/

任何帮助将不胜感激。

【问题讨论】：

无法重现您在小提琴中遇到的错误。
如果您转到移动视图，展开顶级下拉列表，然后收缩，然后调整大小到桌面视图，列表就会消失。以下是错误操作视频的链接：screencast.com/t/6f4xHdCoZ

标签： jquery slidetoggle

【解决方案1】：

您可以使用这个小 sn-p 来“取消应用”style="display:none;"，该style="display:none;" 可能已应用于您的列表并且不会在调整大小时被删除。当窗口大小调整为超过 768 像素时，这会将其重置为 display: (nothing here);。

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：