javascript - Close responsive menu after click on menu item - Stack Overflow

admin管理员组

文章数量:1424942

I have this custom js code for basic (open/close) menu movement that was great when I used it on multi page websites, but it only closes the menu when you click the menu symbol. Now I need to implement it into a one page website and I need it to close after a user clicks on a menu item. I have very little experience in javascript so I need help solving this problem.

The js:

$(document).ready(function() {
    var n = '#nav', no = 'nav-open';
    $('#nav-menu').click(function() {
        if ($(n).hasClass(no)) {
            $(n).animate({height:0},300);
            setTimeout(function() {
                $(n).removeClass(no).removeAttr('style');
            },320);
        }
        else {
            var newH = $(n).css('height','auto').height();
            $(n).height(0).animate({height:newH},300);
            setTimeout(function() {
                $(n).addClass(no).removeAttr('style');
            },320);
        }
    });
});

The HTML:

<!-- Navigation Bar -->
<div class="nav-hold">
  <div class="nav-bar"> 
    <a href="#one" class="nav-logo"><img src="images/logo.png" alt="logo" /></a>
    <a href="#one" class="nav-logo-text">Company name</a>
    <a id="nav-menu" class="nav-menu-symbol">&#9776;<!-- menu symbol --></a>
    <a class="nav-menu">Menu</a>
    <ul class="nav-list" id="nav">
      <li><a href="#one">Top</a></li>
      <li><a href="#two">About us</a></li>
      <li><a href="#three">Services</a></li>
      <li><a href="#four">Portfolio</a></li>
      <li><a href="#five">Contact</a></li>
    </ul>
  </div>
</div>
</div>

I have this custom js code for basic (open/close) menu movement that was great when I used it on multi page websites, but it only closes the menu when you click the menu symbol. Now I need to implement it into a one page website and I need it to close after a user clicks on a menu item. I have very little experience in javascript so I need help solving this problem.

The js:

$(document).ready(function() {
    var n = '#nav', no = 'nav-open';
    $('#nav-menu').click(function() {
        if ($(n).hasClass(no)) {
            $(n).animate({height:0},300);
            setTimeout(function() {
                $(n).removeClass(no).removeAttr('style');
            },320);
        }
        else {
            var newH = $(n).css('height','auto').height();
            $(n).height(0).animate({height:newH},300);
            setTimeout(function() {
                $(n).addClass(no).removeAttr('style');
            },320);
        }
    });
});

The HTML:

<!-- Navigation Bar -->
<div class="nav-hold">
  <div class="nav-bar"> 
    <a href="#one" class="nav-logo"><img src="images/logo.png" alt="logo" /></a>
    <a href="#one" class="nav-logo-text">Company name</a>
    <a id="nav-menu" class="nav-menu-symbol">&#9776;<!-- menu symbol --></a>
    <a class="nav-menu">Menu</a>
    <ul class="nav-list" id="nav">
      <li><a href="#one">Top</a></li>
      <li><a href="#two">About us</a></li>
      <li><a href="#three">Services</a></li>
      <li><a href="#four">Portfolio</a></li>
      <li><a href="#five">Contact</a></li>
    </ul>
  </div>
</div>
</div>

• javascript
• jquery
• html
• css
• responsive-design

Share Improve this question Follow asked Jul 15, 2015 at 15:10 user5119878user5119878

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

change

$('#nav-menu').click(function() {

if you want that your menu close only by clicking on the li element

$('#nav li').click(function() {

or if you want to close menu with both li and menu icon

$('#nav-menu, #nav li').click(function() {

That's because you only bind the click function to the menu symbol. I'm not sure why you separate the symbol and text, but I would prefer to wrap it in single element. Also you can use jQuery slideToggle() to slide down or up on click. Example:

$(document).ready(function() {
    $('#nav-menu').click(function() {
      $('#nav').slideToggle(300);
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-hold">
  <div class="nav-bar"> 
    <a href="#one" class="nav-logo"><img src="images/logo.png" alt="logo" /></a>
    <a href="#one" class="nav-logo-text">Company name</a>
    <a id="nav-menu" class="nav-menu-symbol">
      <span>&#9776;</span>
      <span>Menu</span>
    </a>
    <ul class="nav-list" id="nav">
      <li><a href="#one">Top</a></li>
      <li><a href="#two">About us</a></li>
      <li><a href="#three">Services</a></li>
      <li><a href="#four">Portfolio</a></li>
      <li><a href="#five">Contact</a></li>
    </ul>
  </div>
</div>
</div>

本文标签： javascriptClose responsive menu after click on menu itemStack Overflow