單頁響應式下拉菜單-單擊“ a”時隱藏下拉菜單

Question

使用響應式下拉菜單構建單個頁面布局。 我正在嘗試解決的問題是，一旦用戶單擊“ a”跳轉鏈接，是否可以在.js文件中添加調用以折疊打開的菜單。

 (function($) { $.fn.menumaker = function(options) { var cssmenu = $(this), settings = $.extend({ format: "dropdown", sticky: false }, options); return this.each(function() { $(this).find(".button-mobile").on('click', function() { $(this).toggleClass('menu-opened'); var mainmenu = $(this).next('ul'); if (mainmenu.hasClass('open')) { mainmenu.slideToggle().removeClass('open'); } else { mainmenu.slideToggle().addClass('open'); if (settings.format === "dropdown") { mainmenu.find('ul').show(); } } }); cssmenu.find('li ul').parent().addClass('has-sub'); multiTg = function() { cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>'); cssmenu.find('.submenu-button').on('click', function() { $(this).toggleClass('submenu-opened'); if ($(this).siblings('ul').hasClass('open')) { $(this).siblings('ul').removeClass('open').slideToggle(); } else { $(this).siblings('ul').addClass('open').slideToggle(); } }); }; if (settings.format === 'multitoggle') multiTg(); else cssmenu.addClass('dropdown'); if (settings.sticky === true) cssmenu.css('position', 'fixed'); resizeFix = function() { var mediasize = 960; if ($(window).width() > mediasize) { cssmenu.find('ul').show(); } if ($(window).width() <= mediasize) { cssmenu.find('ul').hide().removeClass('open'); } }; resizeFix(); return $(window).on('resize', resizeFix); }); }; })(jQuery); (function($) { $(document).ready(function() { $("#cssmenu").menumaker({ format: "multitoggle" }); }); })(jQuery); 

 nav { float: right; margin-top: 15px; } #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile { border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu:after, #cssmenu>ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #cssmenu #head-mobile { display: none; } #cssmenu>ul>li { float: left; } #cssmenu>ul>li { padding: 10px 0; } #cssmenu>ul>li:last-child { border: 1px solid #fff; border-radius: 3px; } #cssmenu>ul>li>a { padding: 0 25px 0 25px; font-size: 14px; font-weight: 400; letter-spacing: 1px; text-decoration: none; color: #FFF; } #cssmenu>ul>li:hover>a, #cssmenu ul li.active a { color: rgba(255, 255, 255, .7); } li.buttonfill { transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; -webkit-transition: all .3s ease-in; } li.buttonfill:hover { background-color: rgba(226, 226, 226, .2); transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; -webkit-transition: all .3s ease-out; } @media screen and (max-width:960px) { nav { width: 100%; margin-top: 0; } #cssmenu { width: 100%; margin-top: -10px; } #cssmenu ul { width: 100%; display: none; } #cssmenu ul li { width: 100%; border-top: 1px solid rgba(251, 252, 252, 0.5); background-color: #A31610; } #cssmenu>ul>li:last-child { border-top: 1px solid rgba(251, 252, 252, 0.5); border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; } #cssmenu ul li:hover { background: #C22D32; } #cssmenu>ul>li { padding: 25px; } #cssmenu #head-mobile { display: block; font-size: 16px; font-weight: normal; } .button-mobile { width: 55px; height: 46px; position: absolute; right: 40px; top: -65px; cursor: pointer; z-index: 12399994; } .button-mobile:after { position: absolute; top: 22px; right: 20px; display: block; height: 8px; width: 28px; border-top: 2px solid #FFF; border-bottom: 2px solid #FFF; content: ''; } .button-mobile:before { -webkit-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; position: absolute; top: 16px; right: 20px; display: block; height: 2px; width: 28px; background: #FFF; content: ''; } .button-mobile.menu-opened:after { -webkit-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; top: 23px; border: 0; height: 2px; width: 27px; background: #fff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .button-mobile.menu-opened:before { top: 23px; background: #fff; width: 27px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .container.logo-nav, .container.logo-nav>.sixteen.columns { width: 100%; margin: 0; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <div class="container logo-nav"> <div class="sixteen columns"> <div class="logo"></div> <nav id="cssmenu"> <div id="head-mobile"></div> <div class="button-mobile"></div> <ul> <li><a href="#about" class="smoothScroll">ABOUT</a></li> <li><a href="#services" class="smoothScroll">SERVICES</a></li> <li><a href="#research-media" class="smoothScroll">RESEARCH-MEDIA</a></li> <li><a href="#creative" class="smoothScroll">CREATIVE</a></li> <li class="buttonfill"><a href="#contact" class="smoothScroll">CONTACT</a></li> </ul> </nav> </div> </div> <hr> </header> <!-- End Header --> 

Answer 1

在您的.menumaker（）調用之后，在“ a”標簽上添加一個偵聽器，並觸發一個函數來關閉所有菜單。

$("#cssmenu ul li a").click(function(){
    //fire another click to the menu button to toggle it closed.
});