单击选项时如何关闭菜单？简单的JS，但我不能这样做：/

时间：2018-09-28 16:02:58

标签： javascript html css menu nav

对不起，我的英语不好。我有一个幻灯片菜单，当我单击“打开”并单击“选项”菜单时，它仍然处于打开状态。单击某些选项时如何关闭菜单？ 

/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

(function(window) {

  'use strict';

  // class helper functions from bonzo https://github.com/ded/bonzo

  function classReg(className) {
    return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
  }

  // classList support for class management
  // altho to be fair, the api sucks because it won't accept multiple classes at once
  var hasClass, addClass, removeClass;

  if ('classList' in document.documentElement) {
    hasClass = function(elem, c) {
      return elem.classList.contains(c);
    };
    addClass = function(elem, c) {
      elem.classList.add(c);
    };
    removeClass = function(elem, c) {
      elem.classList.remove(c);
    };
  } else {
    hasClass = function(elem, c) {
      return classReg(c).test(elem.className);
    };
    addClass = function(elem, c) {
      if (!hasClass(elem, c)) {
        elem.className = elem.className + ' ' + c;
      }
    };
    removeClass = function(elem, c) {
      elem.className = elem.className.replace(classReg(c), ' ');
    };
  }

  function toggleClass(elem, c) {
    var fn = hasClass(elem, c) ? removeClass : addClass;
    fn(elem, c);
  }

  var classie = {
    // full names
    hasClass: hasClass,
    addClass: addClass,
    removeClass: removeClass,
    toggleClass: toggleClass,
    // short names
    has: hasClass,
    add: addClass,
    remove: removeClass,
    toggle: toggleClass
  };

  // transport
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(classie);
  } else {
    // browser global
    window.classie = classie;
  }

})(window);

/**
 * main4.js
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2014, Codrops
 * http://www.codrops.com
 */
(function() {

  var bodyEl = document.body,
    content = document.querySelector('.content-wrap'),
    openbtn = document.getElementById('open-button'),
    closebtn = document.getElementById('close-button'),
    isOpen = false,

    morphEl = document.getElementById('morph-shape'),
    s = Snap(morphEl.querySelector('svg'));
  path = s.select('path');
  initialPath = this.path.attr('d'),
    steps = morphEl.getAttribute('data-morph-open').split(';');
  stepsTotal = steps.length;
  isAnimating = false;

  function init() {
    initEvents();
  }

  function initEvents() {
    openbtn.addEventListener('click', toggleMenu);
    if (closebtn) {
      closebtn.addEventListener('click', toggleMenu);
    }

    // close the menu element if the target it´s not the menu element or one of its descendants..
    content.addEventListener('click', function(ev) {
      var target = ev.target;
      if (isOpen && target !== openbtn) {
        toggleMenu();
      }
    });
  }

  function toggleMenu() {
    if (isAnimating) return false;
    isAnimating = true;
    if (isOpen) {
      classie.remove(bodyEl, 'show-menu');
      // animate path
      setTimeout(function() {
        // reset path
        path.attr('d', initialPath);
        isAnimating = false;
      }, 300);
    } else {
      classie.add(bodyEl, 'show-menu');
      // animate path
      var pos = 0,
        nextStep = function(pos) {
          if (pos > stepsTotal - 1) {
            isAnimating = false;
            return;
          }
          path.animate({
            'path': steps[pos]
          }, pos === 0 ? 400 : 500, pos === 0 ? mina.easein : mina.elastic, function() {
            nextStep(pos);
          });
          pos++;
        };

      nextStep(pos);
    }
    isOpen = !isOpen;
  }

  init();

})();
.container {
  background: #fff;
}

.menu-button {
  right: 0;
}

#section1 {
  height: 800px;
  border: 1px solid red;
}

#section2 {
  height: 800px;
  border: 1px solid red;
}

#section3 {
  height: 800px;
  border: 1px solid red;
}
<script src="https://patbb2.ssd-linuxpl.com/strony/base1/js/main4.js"></script>
<script src="https://patbb2.ssd-linuxpl.com/strony/base1/js/snap.svg-min.js"></script>
<script src="https://patbb2.ssd-linuxpl.com/strony/base1/js/classie.js"></script>
<link href="https://patbb2.ssd-linuxpl.com/strony/base1/css/menu_bubble.css" rel="stylesheet" />
<link href="https://patbb2.ssd-linuxpl.com/strony/base1/fonts/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://patbb2.ssd-linuxpl.com/strony/base1/css/demo.css" rel="stylesheet" />
<link href="https://patbb2.ssd-linuxpl.com/strony/base1/css/normalize.css" rel="stylesheet" />
<div class="container">
  <div class="menu-wrap">
    <nav class="menu">
      <div class="icon-list">
        <a href="#section1"><span>Section 1</span></a>
        <a href="#section2"><span>Section 2</span></a>
        <a href="#section3"><span>Section 3</span></a>
      </div>
    </nav>
    <button class="close-button" id="close-button">Close Menu</button>
    <div class="morph-shape" id="morph-shape" data-morph-open="M-7.312,0H15c0,0,66,113.339,66,399.5C81,664.006,15,800,15,800H-7.312V0z;M-7.312,0H100c0,0,0,113.839,0,400c0,264.506,0,400,0,400H-7.312V0z">
      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 800" preserveAspectRatio="none">
						<path d="M-7.312,0H0c0,0,0,113.839,0,400c0,264.506,0,400,0,400h-7.312V0z"/>
					</svg>
    </div>
  </div>
  <button class="menu-button" id="open-button">Open Menu</button>
  <div class="content-wrap">
    <div class="content">

      <div id="section1">
        <h2>Section 1</h2>
      </div>
      <div id="section2">
        <h2>Section 2</h2>
      </div>
      <div id="section3">
        <h2>Section 3</h2>
      </div>

    </div>
  </div>
  <!-- /content-wrap -->
</div>
<!-- /container -->

2 个答案:

答案 0 :(得分：0)

您可以将新的事件侦听器添加到initEvents函数中，例如：

document.querySelector('.menu-wrap').addEventListener('click', function(ev) {
  if (ev.target.nodeName === "SPAN") {
    toggleMenu();
  }
});


/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

(function(window) {

  'use strict';

  // class helper functions from bonzo https://github.com/ded/bonzo

  function classReg(className) {
    return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
  }

  // classList support for class management
  // altho to be fair, the api sucks because it won't accept multiple classes at once
  var hasClass, addClass, removeClass;

  if ('classList' in document.documentElement) {
    hasClass = function(elem, c) {
      return elem.classList.contains(c);
    };
    addClass = function(elem, c) {
      elem.classList.add(c);
    };
    removeClass = function(elem, c) {
      elem.classList.remove(c);
    };
  } else {
    hasClass = function(elem, c) {
      return classReg(c).test(elem.className);
    };
    addClass = function(elem, c) {
      if (!hasClass(elem, c)) {
        elem.className = elem.className + ' ' + c;
      }
    };
    removeClass = function(elem, c) {
      elem.className = elem.className.replace(classReg(c), ' ');
    };
  }

  function toggleClass(elem, c) {
    var fn = hasClass(elem, c) ? removeClass : addClass;
    fn(elem, c);
  }

  var classie = {
    // full names
    hasClass: hasClass,
    addClass: addClass,
    removeClass: removeClass,
    toggleClass: toggleClass,
    // short names
    has: hasClass,
    add: addClass,
    remove: removeClass,
    toggle: toggleClass
  };

  // transport
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(classie);
  } else {
    // browser global
    window.classie = classie;
  }

})(window);

/**
 * main4.js
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2014, Codrops
 * http://www.codrops.com
 */
(function() {

  var bodyEl = document.body,
    content = document.querySelector('.content-wrap'),
    openbtn = document.getElementById('open-button'),
    closebtn = document.getElementById('close-button'),
    isOpen = false,


    morphEl = document.getElementById('morph-shape'),
    s = Snap(morphEl.querySelector('svg'));
  path = s.select('path');
  initialPath = this.path.attr('d'),
    steps = morphEl.getAttribute('data-morph-open').split(';');
  stepsTotal = steps.length;
  isAnimating = false;

  function init() {
    initEvents();
  }

  function initEvents() {
    openbtn.addEventListener('click', toggleMenu);
    if (closebtn) {
      closebtn.addEventListener('click', toggleMenu);
    }

    document.querySelector('.menu-wrap').addEventListener('click', function(ev) {
      if (ev.target.nodeName === "SPAN" || ev.target.nodeName === "A") {
        toggleMenu();
      }
    });

    // close the menu element if the target it´s not the menu element or one of its descendants..
    content.addEventListener('click', function(ev) {
      var target = ev.target;
      if (isOpen && target !== openbtn) {
        toggleMenu();
      }
    });
  }

  function toggleMenu() {
    if (isAnimating) return false;
    isAnimating = true;
    if (isOpen) {
      classie.remove(bodyEl, 'show-menu');
      // animate path
      setTimeout(function() {
        // reset path
        path.attr('d', initialPath);
        isAnimating = false;
      }, 300);
    } else {
      classie.add(bodyEl, 'show-menu');
      // animate path
      var pos = 0,
        nextStep = function(pos) {
          if (pos > stepsTotal - 1) {
            isAnimating = false;
            return;
          }
          path.animate({
            'path': steps[pos]
          }, pos === 0 ? 400 : 500, pos === 0 ? mina.easein : mina.elastic, function() {
            nextStep(pos);
          });
          pos++;
        };

      nextStep(pos);
    }
    isOpen = !isOpen;
  }

  init();

})();
.container {
  background: #fff;
}

.menu-button {
  right: 0;
}

#section1 {
  height: 800px;
  border: 1px solid red;
}

#section2 {
  height: 800px;
  border: 1px solid red;
}

#section3 {
  height: 800px;
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://patbb2.ssd-linuxpl.com/strony/base1/js/classie.js"></script>
<script src="https://patbb2.ssd-linuxpl.com/strony/base1/js/snap.svg-min.js">
  < script src = "https://patbb2.ssd-linuxpl.com/strony/base1/js/main4.js" >
</script>
</script>
<link href="https://patbb2.ssd-linuxpl.com/strony/base1/css/menu_bubble.css" rel="stylesheet" />
<link href="https://patbb2.ssd-linuxpl.com/strony/base1/fonts/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://patbb2.ssd-linuxpl.com/strony/base1/css/demo.css" rel="stylesheet" />
<link href="https://patbb2.ssd-linuxpl.com/strony/base1/css/normalize.css" rel="stylesheet" />
<div class="container">
  <div class="menu-wrap">
    <nav class="menu">
      <div class="icon-list">
        <a href="#section1"><span>Section 1</span></a>
        <a href="#section2"><span>Section 2</span></a>
        <a href="#section3"><span>Section 3</span></a>
      </div>
    </nav>
    <button class="close-button" id="close-button">Close Menu</button>
    <div class="morph-shape" id="morph-shape" data-morph-open="M-7.312,0H15c0,0,66,113.339,66,399.5C81,664.006,15,800,15,800H-7.312V0z;M-7.312,0H100c0,0,0,113.839,0,400c0,264.506,0,400,0,400H-7.312V0z">
      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 800" preserveAspectRatio="none">
						<path d="M-7.312,0H0c0,0,0,113.839,0,400c0,264.506,0,400,0,400h-7.312V0z"/>
					</svg>
    </div>
  </div>
  <button class="menu-button" id="open-button">Open Menu</button>
  <div class="content-wrap">
    <div class="content">

      <div id="section1">
        <h2>Section 1</h2>
      </div>
      <div id="section2">
        <h2>Section 2</h2>
      </div>
      <div id="section3">
        <h2>Section 3</h2>
      </div>

    </div>
  </div>
  <!-- /content-wrap -->
</div>
<!-- /container -->

答案 1 :(得分：0)

您可以将此块添加到initEvents（）函数中：

// close the menu element if you click any of the options
var links = document.querySelectorAll(".icon-list a");
for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function() {
        toggleMenu();
    });
}
相关问题
最新问题