Question

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

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

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

有谁知道什么可能导致什么看起来像一个小故障？问题出现在Chrome，Safari，Firefox和IE11 / 10中。

您所要做的就是调整窗口的大小以使导航器再次出现，但是，在加载窗口时不应隐藏导航菜单，或者您是否必须调整窗口大小以获取菜单项出现。

对可能导致此问题的原因有任何见解？

由于

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>

----------- ------------ CSS

    nav.container {
    position:relative;
    top:-5px!important;
    width:100%;
    height:70px;
    background-color:#252525;
    z-index:50;
    border-bottom:5px solid #ffd09d;
}

nav.container ul {
    position:relative;
    height:70px;
    top:-63px;
    margin:0px!important;
    padding:0px!important;
    text-align:center;
}

nav.container ul li a:hover > span {
    color:#ffffff!important;
}

.current, .submit, .guidelines, .blog, .past, .about {
    position:relative;
    margin-right:-4px;
    padding-left:12px;
    padding-right:13px;
    padding-top:0px;
    padding-bottom:1.5px;
    top:1px;
    left:0px;
    font-family:myriad pro, arial, sans-serif;
    color:#ffffff;
    font-size:1.46em;
    text-align:center;
    line-height:1.95em;
    outline:none;
    list-style:none;
    display:inline-block;
    transition:750ms;
    -webkit-transition:750ms;
    list-style:none;
}

a {
    text-decoration:none;
}

a:hover {
    text-decoration:none;
    color:#252525;
}

li.current:hover, li.submit:hover, li.guidelines:hover, li.blog:hover, li.past:hover, li.about:hover {
    cursor:pointer;
    background-color:#beb29a!important;
    border-bottom:15px solid #ff6000!important;
    transition:100ms;
    -webkit-transition:100ms;
}
#main-image img {
    position:relative;
    top:0px;
    width:100%;
    height:auto;
    margin:0px;
    padding:0px;
}

Answer 1

在我的代码中，我有另一个脚本来控制菜单项的切换/滑动。此菜单以及主导航菜单都使用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>

来自：menu = $（'nav ul'）;

到此：menu = $（'ul.nav-menu'）;

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

1 个答案: