如何设置导航栏默认为以HTML打开？

Question

提前致谢！ 我对HTML非常陌生，并且刚刚建立了我的第一个站点。 我浏览了其他类似的问题，但没有找到针对此特定问题的明确答案。

我希望将导航栏默认打开。 我尝试分别注释掉每一行代码并更改js中的小内容，但似乎无法隔离问题。

这是现在的网站，菜单图标位于顶部中心： https : //charlottemcclintock.github.io

HTML：

<!--menu start-->
<div class="menu" >
<a href="#" class="nav-icon" id="nav-show"><i class="fa fa-bars"></i></a>
    <div class="navbar-wrapper">
        <div class="container">
            <div class="navwrapper">
                <div class="navbar navbar-inverse navbar-static-top">
                    <div class="container">
                        <!--<div class="logo">logo</div> -->
                        <div align="right" class="navArea"><a href="#" class="closeMenu"><i class="fa fa-times"></i></a>
                                <div class="navbar-header">
                                    <button  type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                                 <!-- <a class="navbar-brand" href="#">Menu</a>  --></div>
                                <div class="navbar-collapse collapse">
                                    <ul class="nav navbar-nav">
                                        <li class="menuItem active"><a href="#wrapper">Home</a></li>
                                        <li class="menuItem"><a href="#aboutus">About Me</a></li>
                                        <li class="menuItem"><a href="resume.html" target = "_blank" >CV</a></li>
                                        <li class="menuItem"><a href="#" target = "_blank" >Photography</a></li>
                                        <!-- <li class="menuItem"><a href="#education">Education</a></li> -->
                                        <li class="menuItem"><a href="#ourwork">Portfolio</a></li>
                                        <li class="menuItem"><a href="#contact">Contact</a></li>
                                    <!-- </ul> -->
                                </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Navbar -->
        </div>
    </div>
</div>
<!--menu end-->

相关的javascript：

$('#nav-show').click(function(x){
    x.preventDefault();
    $('.wrapper').removeClass('noGap');
    $('.navbar-wrapper').animate({
        opacity:1
    },200);
    $('.navbar-wrapper').removeClass('default-menu');
    $(this).fadeOut();
});

$('.closeMenu').click(function(x){
    x.preventDefault();
    $('.navbar-wrapper').animate({
        opacity:0
    },50,function(){$('.navbar-wrapper').addClass('default-menu');});

    $('#nav-show').fadeIn();
});

谢谢您阅读此篇！

Answer 1

尝试这段代码，看看它是否有效。

$('.wrapper').removeClass('noGap');
    $('.navbar-wrapper').animate({
        opacity:1
    },200);
    $('.navbar-wrapper').removeClass('default-menu');
    $(this).fadeOut();
$("#nav-show").hide(); // This line is edited.

$('#nav-show').click(function(x){
    x.preventDefault();
    $('.wrapper').removeClass('noGap');
    $('.navbar-wrapper').animate({
        opacity:1
    },200);
    $('.navbar-wrapper').removeClass('default-menu');
    $(this).fadeOut();
});

$('.closeMenu').click(function(x){
    x.preventDefault();
    $('.navbar-wrapper').animate({
        opacity:0
    },50,function(){$('.navbar-wrapper').addClass('default-menu');});

    $('#nav-show').fadeIn();
});