做出选择后关闭移动菜单

Question

我借助一些在线代码为我的单页网站创建了一个移动菜单。目前，由于我使用的 javascript 代码，当您 select 主导航栏时，菜单仅 opens/closes。是否可以在菜单项被 selected 后关闭菜单，以便当菜单项被 selected 并且页面滚动到锚点时，导航菜单关闭并且不会'不开门吗？

这是我当前菜单的示例：https://jsfiddle.net/kmracozg/

HTML:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" ></script>
</head>

<a id="touch-menu" class="mobile-menu" href="#"><div class="mobile-logo">LOGO HERE</div><div class="mobile-menu-dropdown">MENU</div></a>
<div class="header-logo">LOGO HERE</div>
    <nav>
    <ul class="menu">
   <li><a href="#"></i>HOME</a>
   <li><a href="#"></i>ABOUT</a>
   <li><a href="#"></i>SOLUTIONS</a>
   <li><a href="#"></i>WORK</a>
   <li><a href="#"></i>CONTACT</a>
   <li><a href="#"></i><b>CLIENT AREA</b></a>
  </ul>
  </nav>

CSS:

/* ---------- Google Font ---------- */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800);

/* RESET STYLES */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }


body{background:#000;
font: 14px "Open Sans", Helvetica, Arial, sans-serif;
width:100%;}




nav{display:block;
background:#ffffff;
text-align: right;
}

.menu{display:block;}

.menu li{display: inline-block;
position: relative;
z-index:100;}

.menu li:first-child{margin-left:0;}

.menu li a {font-weight:600;
text-decoration:none;
padding:40px 20px;
display:block;
color:#393939;

-webkit-transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.2s ease-in-out 0s;
   -o-transition: all 0.2s ease-in-out 0s;
   -ms-transition: all 0.2s ease-in-out 0s;
   transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover, .menu li:hover > a{color:#B11A25;
background:#e4e4e4;}

.menu ul {display: none;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
top: 43px;
left: 0px;
background: #ffffff;
}

.menu ul li {display:block;
float: none;
background:none;
margin:0;
padding:0;
}
.menu ul li a {font-size:12px;
font-weight:normal;
display:block;
color:#797979;
border-left:3px solid #ffffff;
background:#ffffff;}

.menu ul li a:hover, .menu ul li:hover > a{
background:#f0f0f0;
border-left:3px solid #B11A25;
color:#797979;
}

.menu li:hover > ul{ display: block;}
.menu ul ul {left: 149px;
 top: 0px;
}

.mobile-menu{display:none;
width:100%;
padding:16px;
background:#ffffff;
color:#393939;
text-transform:uppercase;
font-weight:600;
}
.mobile-menu:hover{background:#ffffff;
color:#393939;
text-decoration:none;
}

.mobile-menu img { display: block; margin: 0 auto; }

.mobile-menu-dropdown{ display: table; margin: 10px auto 0; }

.header-logo { position: absolute; padding: 30px; }

@media (max-width: 900px) {


.menu{display:none;}

.mobile-menu{display:block;}

nav{margin:0;
background:none;}

.menu li{display:block;
margin:0;}

.menu li a {background:#ffffff;
color:#797979;
border-top:1px solid #e0e0e0;
border-left:3px solid #ffffff;
padding:20px;
}

.menu li a:hover, .menu li:hover > a{
background:#e4e4e4;
color:#B11A25;
border-left:3px solid #B11A25;}

.menu ul {display:block;
position:relative;
top:0;
left:0;
width:100%;}

.menu ul ul {left:0;}

.header-logo { display: none; }

.mobile-logo { text-align: center; }

nav { text-align: left !important; }

Javascript:

$(document).ready(function(){ 
 var touch  = $('#touch-menu');
 var menu  = $('.menu');

 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });
 
 $(window).resize(function(){
  var w = $(window).width();
  if(w > 900 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
 
});

Answer 1

要再次切换菜单，您必须将事件绑定到 li a

$(document).ready(function(){ 
 var touch  = $('#touch-menu');
 var menu  = $('.menu');

 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });
    $("ul.menu").find("li a").click(function() {
        if(menu.hasClass('mobile')) menu.slideToggle();
    });
 
 $(window).resize(function(){
        var w = $(window).width();
        if(w > 900) {
            menu.removeAttr('style');
            menu.removeClass('mobile');
        } else {
            menu.addClass('mobile');
        }
    });
     
  // initially to set the class name
     var w = $(window).width();
     if(w > 900) {
            menu.removeAttr('style');
            menu.removeClass('mobile');
        } else {
            menu.addClass('mobile');
        }
    
});

/* ---------- Google Font ---------- */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800);

/* RESET STYLES */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }


body{background:#000;
font: 14px "Open Sans", Helvetica, Arial, sans-serif;
width:100%;}




nav{display:block;
background:#ffffff;
text-align: right;
}

.menu{display:block;}

.menu li{display: inline-block;
position: relative;
z-index:100;}

.menu li:first-child{margin-left:0;}

.menu li a {font-weight:600;
text-decoration:none;
padding:40px 20px;
display:block;
color:#393939;

-webkit-transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.2s ease-in-out 0s;
   -o-transition: all 0.2s ease-in-out 0s;
   -ms-transition: all 0.2s ease-in-out 0s;
   transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover, .menu li:hover > a{color:#B11A25;
background:#e4e4e4;}

.menu ul {display: none;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
top: 43px;
left: 0px;
background: #ffffff;
}

.menu ul li {display:block;
float: none;
background:none;
margin:0;
padding:0;
}
.menu ul li a {font-size:12px;
font-weight:normal;
display:block;
color:#797979;
border-left:3px solid #ffffff;
background:#ffffff;}

.menu ul li a:hover, .menu ul li:hover > a{
background:#f0f0f0;
border-left:3px solid #B11A25;
color:#797979;
}

.menu li:hover > ul{ display: block;}
.menu ul ul {left: 149px;
 top: 0px;
}

.mobile-menu{display:none;
width:100%;
padding:16px;
background:#ffffff;
color:#393939;
text-transform:uppercase;
font-weight:600;
}
.mobile-menu:hover{background:#ffffff;
color:#393939;
text-decoration:none;
}

.mobile-menu img { display: block; margin: 0 auto; }

.mobile-menu-dropdown{ display: table; margin: 10px auto 0; }

.header-logo { position: absolute; padding: 30px; }

@media (max-width: 900px) {


.menu{display:none;}

.mobile-menu{display:block;}

nav{margin:0;
background:none;}

.menu li{display:block;
margin:0;}

.menu li a {background:#ffffff;
color:#797979;
border-top:1px solid #e0e0e0;
border-left:3px solid #ffffff;
padding:20px;
}

.menu li a:hover, .menu li:hover > a{
background:#e4e4e4;
color:#B11A25;
border-left:3px solid #B11A25;}

.menu ul {display:block;
position:relative;
top:0;
left:0;
width:100%;}

.menu ul ul {left:0;}

.header-logo { display: none; }

.mobile-logo { text-align: center; }

nav { text-align: left !important; }

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" ></script>
</head>

<a id="touch-menu" class="mobile-menu" href="#"><div class="mobile-logo">LOGO HERE</div><div class="mobile-menu-dropdown">MENU</div></a>
<div class="header-logo">LOGO HERE</div>
    <nav>
    <ul class="menu">
   <li><a href="#"></i>HOME</a>
   <li><a href="#"></i>ABOUT</a>
   <li><a href="#"></i>SOLUTIONS</a>
   <li><a href="#"></i>WORK</a>
   <li><a href="#"></i>CONTACT</a>
   <li><a href="#"></i><b>CLIENT AREA</b></a>
  </ul>
  </nav>

Answer 2

https://jsfiddle.net/kmracozg/3/

我对你的 jQuery 进行了更改。我在 li 元素上添加了一个点击处理程序。要滚动到页面的特定部分，您需要为每个 div 或部分提供一个 ID，并为该特定 ID 提供 link，如下所示：

   <a href="#contact">Contact</a>
   ...
   <div id="contact">
   ...
   ...
   </div>

如果您需要更清楚的信息，请告诉我！

做出选择后关闭移动菜单

Close mobile menu when selection is made

html

javascript

css

jquery

menu