javascript - 导航菜单单击以打开和关闭导航项和内容(Nav menu click opening and closing the Nav items and content)

Question

I just created a nav menu icon and nav item list Home, About & Contact and on clicking each nav list item displaying their content.(我刚刚创建了一个导航菜单图标和导航项列表“主页”，“关于”和“联系方式”，并单击了显示其内容的每个导航项。)

My requirement is I haven't provided a close button for closing the content.(我的要求是我没有提供用于关闭内容的关闭按钮。) all the closing opening should work from the nav menu click only.(所有关闭的开头都应该在导航菜单上单击才能起作用。) ie on the first click on nav menu nav items will display (Home, About and Contact), by click on any of the items list their content will appear and by clicking the nav menu again here will need to close the content and nav items needs to appear.(例如，在第一次单击导航菜单时，将显示导航项（家庭，关于和联系人），通过单击任何项??列表，将显示其内容，然后再次单击导航菜单，此处需要关闭内容和导航项需求出现。) that is it needs to go back to the nav items from the content.(这就是需要从内容返回到导航项。) Below is my code:(下面是我的代码：) $(document).ready(function(){ $('.nav-menu').click(function(){ $('#menu').toggleClass("open-menu"); }); $(".link").click(function(e) { e.preventDefault(); $('.home_content .scroll').fadeOut('fast'); $('#' + $(this).data('rel')).fadeIn('fast'); $('.link').removeClass("focus"); $(this).addClass("focus"); }); $(".desktop li .link").click(function(){ $(".desktop li").addClass("open"); $(this).siblings().removeClass("open-btn") $(this).parent().parent().removeClass("open"); $(this).removeClass("focus"); $(this).parent().addClass("focus"); }); }); #menuToggle { display: block; z-index: 1; -webkit-user-select: none; user-select: none; padding-left:5px; } #menu{ display:flex; flex-direction:column; justify-content: space-between; position: fixed; height: 82%; width: 24%; padding-top: 7px; padding-left:0px; list-style-type: none; -webkit-font-smoothing: antialiased; transform-origin: 0% 0%; transform: translate(-110%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); } /*hamburger*/ .nav-menu span { display: block; width: 21px; height: 1px; margin-bottom: 4px; position: relative; background: #000; border-radius: 25px; z-index: 1; } .nav-menu{ padding-top:5px; } .active_links{ margin-top:0px; margin-bottom:1.6vh; padding-right:0vw; width: 100%; margin-left: auto; margin-right: auto; } .bottom-links{ padding-bottom:0.5vw; text-align: right; position:absolute; bottom:0; left:0; right:0; margin:auto; width:100%; } .active_links a{ font-size: 16px; font-family: "font-regular"; } .bottom-links a{ font-size: 16px; } .open-menu{ transform: none !important; } /* content container */ .home_content { position: relative; width: 23%; height: 88vh; margin-top:auto; margin-bottom:auto; } .scroll{ display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index:10; } .wrapper{ display:flex; height:88%; } #content1{ padding-bottom:20px; position:relative; transition:all 500ms ease; } } .cover-bar { position: absolute; background: #fff;; height: 100%; top: 0; right: 0px; width: .5em; transition: all .5s; opacity: 1; } .link-wrapper{ display:flex; align-items: center; justify-content: space-between; } .firm_content{ text-align: justify; font-size: 15px; line-height: 1.3; width: 100%; height:96%; margin: 0px auto 0px auto; padding-bottom:10px; letter-spacing:1px; color:grey; } .scroll a{ color:grey; text-decoration: none; line-height: 1; font-size:15px; } .ch{ font-size:14px; } .open{ display:none; } .open-btn{ visibility: hidden; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="menuToggle"> <div class="nav-menu"> <span></span> <span></span> <span></span> </div> <ul class="nav" id="menu"> <div class="active_links desktop scroll-width-thin"> <li> <div class="link-wrapper"> <a href="#" class="link" data-rel="content1">Home</a> </div> <div id="content1" class="close-text"> <div class="firm_content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </li> <li> <div class="link-wrapper"> <a href="#" class="link" data-rel="content2">About</a> </div> <div id="content2" class="close-text"> <div class="firm_content" style="text-align:left"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </li> <li> <div class="link-wrapper"> <a href="#" class="link" data-rel="content4">Contact</a> </div> <div id="content4" class="close-text"> <div class="firm_content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </li> </div> </ul> </div>   ask by Saif translate from so

Answer 1

The following changes needs to be done in your code base:(需要在代码库中进行以下更改：)

1. Remove the open .class & hide content of menu on click of .nav-menu(1.单击.nav-menu删除打开的.class并隐藏菜单内容) $(".desktop li").removeClass("open"); $('.firm_content').hide(); 2. On click event of menu just use toggleClass method to add remove .open class(2.在菜单的单击事件上，只需使用toggleClass方法添加remove .open类) $(".desktop li").toggleClass("open"); $(document).ready(function() { $('.firm_content').hide(); $('.nav-menu').click(function() { if($('.firm_content').is(":visible")){ $('.firm_content').hide(); $(".desktop li").removeClass("open"); }else{ $('#menu').toggleClass("open-menu"); } }); $(".link").click(function(e) { e.preventDefault(); $('.home_content .scroll').fadeOut('fast'); $('#' + $(this).data('rel')).fadeIn('fast'); $('.link').removeClass("focus"); $(this).addClass("focus"); }); $(".desktop li .link").click(function() { $(".desktop li").toggleClass("open"); $(this).siblings().removeClass("open-btn") $(this).parent().parent().removeClass("open"); $(this).removeClass("focus"); $(this).parent().addClass("focus"); $(this).closest('div').next().find('.firm_content').toggle(); }); }); #menuToggle { display: block; z-index: 1; -webkit-user-select: none; user-select: none; padding-left: 5px; } #menu { display: flex; flex-direction: column; justify-content: space-between; position: fixed; height: 82%; width: 24%; padding-top: 7px; padding-left: 0px; list-style-type: none; -webkit-font-smoothing: antialiased; transform-origin: 0% 0%; transform: translate(-110%, 0); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0); } /*hamburger*/ .nav-menu span { display: block; width: 21px; height: 1px; margin-bottom: 4px; position: relative; background: #000; border-radius: 25px; z-index: 1; } .nav-menu { padding-top: 5px; } .active_links { margin-top: 0px; margin-bottom: 1.6vh; padding-right: 0vw; width: 100%; margin-left: auto; margin-right: auto; } .bottom-links { padding-bottom: 0.5vw; text-align: right; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; } .active_links a { font-size: 16px; font-family: "font-regular"; } .bottom-links a { font-size: 16px; } .open-menu { transform: none !important; } /* content container */ .home_content { position: relative; width: 23%; height: 88vh; margin-top: auto; margin-bottom: auto; } .scroll { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; } .wrapper { display: flex; height: 88%; } #content1 { padding-bottom: 20px; position: relative; transition: all 500ms ease; } } .cover-bar { position: absolute; background: #fff; ; height: 100%; top: 0; right: 0px; width: .5em; transition: all .5s; opacity: 1; } .link-wrapper { display: flex; align-items: center; justify-content: space-between; } .firm_content { text-align: justify; font-size: 15px; line-height: 1.3; width: 100%; height: 96%; margin: 0px auto 0px auto; padding-bottom: 10px; letter-spacing: 1px; color: grey; } .scroll a { color: grey; text-decoration: none; line-height: 1; font-size: 15px; } .ch { font-size: 14px; } .open { display: none; } .open-btn { visibility: hidden; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="menuToggle"> <div class="nav-menu"> <span></span> <span></span> <span></span> </div> <ul class="nav" id="menu"> <div class="active_links desktop scroll-width-thin"> <li> <div class="link-wrapper"> <a href="#" class="link" data-rel="content1">Home</a> </div> <div id="content1" class="close-text"> <div class="firm_content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </li> <li> <div class="link-wrapper"> <a href="#" class="link" data-rel="content2">About</a> </div> <div id="content2" class="close-text"> <div class="firm_content" style="text-align:left"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </li> <li> <div class="link-wrapper"> <a href="#" class="link" data-rel="content4">Contact</a> </div> <div id="content4" class="close-text"> <div class="firm_content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </li> </div> </ul> </div>