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
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
