jQuery汉堡菜单问题

Question

我使用jQuery创建了一个汉堡菜单，但需要您的帮助才能找出最后几个点。首先，我在导航栏中打开的菜单链接中添加了一个转换效果，该菜单链接不工作。其次，当汉堡关闭时，我需要关闭#menu_list。目前它仍然是开放的。

<div id="mobile_navBar"> 

    <div id="burger_icon"> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    </div> 
</div> 

<nav> 

    <ul> 
    <img class="nav_decoration" src="images/top%20frame.png" alt=""> 
    <li id="open_menu"><a href="#">open menu</a></li> 
    <ul id="menu_list"> 
     <li class="auto_close"><a href="#welcomeAnchor">Welcome</a></li> 
     <li class="auto_close"><a href="#menuAnchor">Menu</a></li> 
     <li class="auto_close"><a href="#timesAnchor">Opening Times</a></li> 
    </ul> 
    <img class="nav_decoration" src="images/Base%20Frame.png" alt=""> 
    </ul> 
</nav> 

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 

CSS：

#mobile_navBar{ 
    display: block !important; 
    background-color: #111; 
    position: relative; 
    height: 4em; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 1000; 
} 

#burger_icon{ 
    display: block; 
    float: right; 
    position: relative; 
    height: 32px; 
    width: 40px; 
    cursor: pointer; 
    margin-top: 1em; 
    margin-right: 0.5em; 
} 

#burger_icon span{ 
    position: absolute; 
    display: block; 
    width: 40px; 
    height: 5px; 
    background-color: #fff; 
    border-radius: 5px; 
    transition: all 0.25s; 
    -webkit-transition: all 0.25s; 
    -moz-transition: all 0.25s; 
    -ms-transition: all 0.25s; 
    -o-transition: all 0.25s; 
} 

#burger_icon span:nth-child(1){ 
    top: 0; 
} 

#burger_icon span:nth-child(2), #burger_icon span:nth-child(3){ 
    top: 13px; 
} 

#burger_icon span:nth-child(4){ 
    bottom: 0px; 
} 

#burger_icon.open span:nth-child(1){ 
    opacity: 0; 
} 

#burger_icon.open span:nth-child(2){ 
    transform: rotate(45deg); 
} 

#burger_icon.open span:nth-child(3){ 
    transform: rotate(-45deg); 
} 

#burger_icon.open span:nth-child(4){ 
    opacity: 0; 
} 

nav{ 
    margin-top: 4em; 
    position: fixed; 
    overflow: hidden; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 0; 
    transition: height 1s; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.9); 
    text-align: center; 
} 

nav ul{ 
    width: 100%; 
    padding-top: 2em; 
    padding-bottom: 80px; 
    overflow: scroll; 
} 

nav ul li{ 
    display: block; 
    box-sizing: border-box; 
    padding: 2em 0; 
    margin: 0 auto; 
} 

nav ul li a{ 
    font-size: 2em; 
    color: white; 
} 

#menu_list{ 
    display: none; 
    height: 0; 
    transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
} 

#menu_list.show{ 
    display: block; 
    padding: 0; 
    height: auto; 
} 

#open_menu.hide{ 
    display: none; 
} 

#menu-list:nth-child(1){ 
    border-bottom: dotted 1px #fff; 
    width: 55%; 
} 

#menu-list:nth-child(2){ 
    border-bottom: dotted 1px #fff; 
    width: 55%; 
} 

nav.show{ 
    height: 100%; 
    display: block; 
    overflow: scroll; 
} 

.nav_decoration{ 
    display: block; 
    width: 90%; 
    margin: 0 auto; 
} 

#contact_title{ 
    display: block; 
    font-size: 2em; 
    padding-top: 1em; 
    padding-bottom: 0.5em; 
    font-weight: bold; 
} 

#contact_title span{ 
    border-bottom: dotted 1px #fff; 
} 

.mob_contact{ 
    font-size: 1.25em; 
    padding: 0.25em 0; 
    display: block; 
} 

#mob_num{ 
    font-size: 2.5em; 
} 

#mob_icons{ 
    display: block; 
    font-size: 1em; 
    padding: 0 !important; 
} 

的jQuery：

$(document).ready(function() { 
    $("#burger_icon, .auto_close").click(function() { 

    $("body").toggleClass("no_scroll"); 
    $("nav").toggleClass("show"); 
    $("#burger_icon").toggleClass("open"); 

    $("#open_menu").click(function() { 
     $("#menu_list").toggleClass("show"); 
     $("#open_menu").toggleClass("hide"); 
    }); 
    }); 
}); 

这里有一个演示https://jsfiddle.net/Lsxht5bs/

Answer 1

添加以下代码$("#burger_icon, .auto_close")点击事件中。

$("#menu_list").removeClass("show");

$("#open_menu").removeClass("hide");

这将重置内部菜单。转换在你的小提琴中工作正常。

Answer 2

Here is the updated demo with your desired functionality with your updated code  

$(document).ready(function() { 
 
    $("#burger_icon, .auto_close").click(function() { 
 

 
    $("body").toggleClass("no_scroll"); 
 
    $("nav").toggleClass("show"); 
 
    $("#burger_icon").toggleClass("open"); 
 

 
    $("#open_menu").click(function() { 
 
     $("#menu_list").toggleClass("show"); 
 
     $("#open_menu").toggleClass("hide"); 
 
    }); 
 
    
 
     if($('#menu_list').hasClass('show')) { 
 
     $('#menu_list').removeClass('show'); 
 
     $("#open_menu").removeClass("hide"); 
 
     } 
 
    }); 
 
});

#mobile_navBar{ 
 
    display: block !important; 
 
    background-color: #111; 
 
    position: relative; 
 
    height: 4em; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 1000; 
 
} 
 

 
#burger_icon{ 
 
    display: block; 
 
    float: right; 
 
    position: relative; 
 
    height: 32px; 
 
    width: 40px; 
 
    cursor: pointer; 
 
    margin-top: 1em; 
 
    margin-right: 0.5em; 
 
} 
 

 
#burger_icon span{ 
 
    position: absolute; 
 
    display: block; 
 
    width: 40px; 
 
    height: 5px; 
 
    background-color: #fff; 
 
    border-radius: 5px; 
 
    transition: all 0.25s; 
 
    -webkit-transition: all 0.25s; 
 
    -moz-transition: all 0.25s; 
 
    -ms-transition: all 0.25s; 
 
    -o-transition: all 0.25s; 
 
} 
 

 
#burger_icon span:nth-child(1){ 
 
    top: 0; 
 
} 
 

 
#burger_icon span:nth-child(2), #burger_icon span:nth-child(3){ 
 
    top: 13px; 
 
} 
 

 
#burger_icon span:nth-child(4){ 
 
    bottom: 0px; 
 
} 
 

 
#burger_icon.open span:nth-child(1){ 
 
    opacity: 0; 
 
} 
 

 
#burger_icon.open span:nth-child(2){ 
 
    transform: rotate(45deg); 
 
} 
 

 
#burger_icon.open span:nth-child(3){ 
 
    transform: rotate(-45deg); 
 
} 
 

 
#burger_icon.open span:nth-child(4){ 
 
    opacity: 0; 
 
} 
 

 
nav{ 
 
    margin-top: 4em; 
 
    position: fixed; 
 
    overflow: hidden; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 0; 
 
    transition: height 1s; 
 
    background: rgb(0, 0, 0); 
 
    background: rgba(0, 0, 0, 0.9); 
 
    text-align: center; 
 
} 
 

 
nav ul{ 
 
    width: 100%; 
 
    padding-top: 2em; 
 
    padding-bottom: 80px; 
 
    overflow: scroll; 
 
} 
 

 
nav ul li{ 
 
    display: block; 
 
    box-sizing: border-box; 
 
    padding: 2em 0; 
 
    margin: 0 auto; 
 
} 
 

 
nav ul li a{ 
 
    font-size: 2em; 
 
    color: white; 
 
} 
 

 
#menu_list{ 
 
    display: none; 
 
    height: 0; 
 
    transition: all 1s ease; 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
} 
 

 
#menu_list.show{ 
 
    display: block; 
 
    padding: 0; 
 
    height: auto; 
 
} 
 

 
#open_menu.hide{ 
 
    display: none; 
 
} 
 

 
#menu-list:nth-child(1){ 
 
    border-bottom: dotted 1px #fff; 
 
    width: 55%; 
 
} 
 

 
#menu-list:nth-child(2){ 
 
    border-bottom: dotted 1px #fff; 
 
    width: 55%; 
 
} 
 

 
nav.show{ 
 
    height: 100%; 
 
    display: block; 
 
    overflow: scroll; 
 
} 
 

 
.nav_decoration{ 
 
    display: block; 
 
    width: 90%; 
 
    margin: 0 auto; 
 
} 
 

 
#contact_title{ 
 
    display: block; 
 
    font-size: 2em; 
 
    padding-top: 1em; 
 
    padding-bottom: 0.5em; 
 
    font-weight: bold; 
 
} 
 

 
#contact_title span{ 
 
    border-bottom: dotted 1px #fff; 
 
} 
 

 
.mob_contact{ 
 
    font-size: 1.25em; 
 
    padding: 0.25em 0; 
 
    display: block; 
 
} 
 

 
#mob_num{ 
 
    font-size: 2.5em; 
 
} 
 

 
#mob_icons{ 
 
    display: block; 
 
    font-size: 1em; 
 
    padding: 0 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="mobile_navBar"> 
 

 
    <div id="burger_icon"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    </div> 
 
</div> 
 

 
<nav> 
 

 
    <ul> 
 
    <img class="nav_decoration" src="images/top%20frame.png" alt=""> 
 
    <li id="open_menu"><a href="#">open menu</a></li> 
 
    <ul id="menu_list"> 
 
     <li class="auto_close"><a href="#welcomeAnchor">Welcome</a></li> 
 
     <li class="auto_close"><a href="#menuAnchor">Menu</a></li> 
 
     <li class="auto_close"><a href="#timesAnchor">Opening Times</a></li> 
 
    </ul> 
 
    <img class="nav_decoration" src="images/Base%20Frame.png" alt=""> 
 
    </ul> 
 
</nav> 
 

 
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>