Javascript 导航菜单将消失，直到调整窗口大小

每次打开或刷新窗口时，我都使用Javascript从一系列图像中随机加载一个图像。该图像表示占据可视窗口近一半的背景图像。同样，图像每次都是随机的

图像的div位于导航栏上方，并且由于某些原因，当加载图像时，导航栏中的li文本将消失（实际导航栏保持不变），直到调整窗口的大小

在我的代码中，背景图像也位于导航栏的代码上方，因为它们是相对定位的

有人知道是什么导致了看起来像是小故障吗？这个问题发生在Chrome、Safari、Firefox和IE11/10上

您所要做的只是稍微调整窗口的大小，使导航ul li重新出现，但是，加载窗口时不应隐藏导航菜单，或者必须调整窗口的大小以显示菜单项

对导致此问题的原因有何见解

谢谢

Javascript and HTML Code below ----->
<!------------Random Image script   start  below------------>
<div id="main-image">
<script type="text/javascript">
var images = ['type-writer.jpg', 'quechua3.jpg', 'chicago3.jpg', 'type-writer-books.jpg', 'one-hundred-plus-forty-eight.jpg'];
$('#main-image').css({'background-image': 'url(images/cover-images/' + images[Math.floor(Math.random() * images.length)] + ')'});
$('<img src="images/cover-images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#main-image');
</script>
</div>
<!------------Random Image script   END------------>



<nav class="container">
<div id="mobile-logo"><img src="images/logo-2.svg" width="70px" alt="3Elements Review, a literary journal based in Chicago, Illinois. This is our magazine's logo." border="none" id="mobile-logo"></div>
<ul>
<li class="current" style="background-color:#313131;"><a href="current-journal.html" class="current">CURRENT JOURNAL<span class="sub-nav">Our latest and greatest!</span></a></li>
<li class="submit" style="background-color:#404040;"><a href="submit.html" class="current">SUBMIT<span class="sub-nav">Your writing</span></a></li>
<li class="guidelines" style="background-color:#505050;"><a href="submission-guidelines.html" class="current">SUBMISSION GUIDELINES<span class="sub-nav">Everything you need to know is here</span></a></li>
<li class="blog" style="background-color:#4b4b4b;"><a href="3eblog.html" class="current">BLOG<span class="sub-nav">Just a blog</span></a></li>
<li class="past" style="background-color:#404040;"><a href="past-journals.html" class="current">PAST JOURNALS<span class="sub-nav">Browse our issue archives</span></a></li>
<li class="about" style="background-color:#313131;"><a href="about-3elements.html" class="current">ABOUT 3E<span class="sub-nav">What we're about</span></a></li>
</ul>
</nav>

---

在我的代码中，我有另一个控制菜单项切换/向下滑动的脚本。此菜单以及主导航菜单都使用nav属性

在我的javascript代码中，我只需进一步针对我的css，而不是使用nav ul，因为我的移动菜单的javascript代码不够精确，影响了我的主导航菜单，导致它在调整窗口大小之前被短暂隐藏

所以我修改了一行代码如下：

<script>
$(function () {
        var pull = $('button.open-menu');
        menu = $('ul.nav-menu');
        menuHeight = menu.height();
        menu.slideToggle(0);
        $(pull).on('click', function (e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function () {
            var w = $(window).width();
            if (w > 320 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });
</script>

$（函数（）{
var pull=$（'button.open menu'）；
菜单=$（'ul.nav菜单'）；
menuHeight=menu.height（）；
菜单。滑动切换（0）；
$（拉动）。打开（'点击'，函数（e）{
e、 预防默认值（）；
menu.slideToggle（）；
});
$（窗口）。调整大小（函数（）{
var w=$（window.width（）；
如果（w>320&&menu.is（':hidden'））{
menu.removeAttr（'style'）；
}
});
});

从中：菜单=$（'nav ul'）

对此：menu=$（'ul.nav menu'）

<script>
$(function () {
        var pull = $('button.open-menu');
        menu = $('ul.nav-menu');
        menuHeight = menu.height();
        menu.slideToggle(0);
        $(pull).on('click', function (e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function () {
            var w = $(window).width();
            if (w > 320 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });
</script>