javascript - 点击外部导航关闭

Question

我有下面的代码，它工作正常，但是我需要它在点击导航外部时关闭导航(所以不是按钮)

我试过了，但是不行

$("body").click(function (e) {
         $('#navwrapper').removeClass('is-visible');
    });

任何帮助将不胜感激

非常感谢

	var offset = 0;
			
				var navigationContainer = $('#cd-nav'),
			    mainNavigation = navigationContainer.find('#cd-main-nav ul');
			
			
				checkMenu();
				$(window).scroll(function(){
					checkMenu();
				});
			
				$('.cd-nav-trigger').click(function(){
					$('.content').toggleClass('static');
				})
			
				$('.cd-nav-trigger').on('click', function(){
					$(this).toggleClass('menu-is-open');
					mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');
				});
			
				function checkMenu() {
					if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
						navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
							mainNavigation.addClass('has-transitions');
						});
					} else if ($(window).scrollTop() <= offset) {
						//check if the menu is open when scrolling up
						if( mainNavigation.hasClass('is-visible')  && !$('html').hasClass('no-csstransitions') ) {
							//close the menu with animation
							mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
								//wait for the menu to be closed and do the rest
								mainNavigation.removeClass('is-visible is-hidden has-transitions');
								navigationContainer.removeClass('is-fixed');
								$('.cd-nav-trigger').removeClass('menu-is-open');
							});
						//check if the menu is open when scrolling up - fallback if transitions are not supported
						} else if( mainNavigation.hasClass('is-visible')  && $('html').hasClass('no-csstransitions') ) {
								mainNavigation.removeClass('is-visible has-transitions');
								navigationContainer.removeClass('is-fixed');
								$('.cd-nav-trigger').removeClass('menu-is-open');
								
						//scrolling up with menu closed
					} else {
							navigationContainer.removeClass('is-fixed');
							mainNavigation.removeClass('has-transitions');
						}
					} 
				}

#cd-nav  {
  outline: 0px;
  z-index: 1002;
  position: absolute;
  display: block;
}
#cd-nav ul {

  position: fixed;
  width: 90%;

  right: 5%;
  bottom: 80px;
  padding-bottom:20px;
  box-shadow: 0 0 10px rgba(0, 0,0, 0.4);
  background: white;
  visibility: hidden;
  overflow: hidden;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
  transition: transform 0.3s, visibility 0s 0.3s;
}
#cd-nav ul li {
   -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: #ffffff;
  width: 90%;
  padding-bottom: 10px;
  padding-top: 10px;
  margin-left: 5%;
  border-bottom: 1px solid rgb(235, 235, 235);
}
#cd-nav ul.is-visible {
  visibility: visible;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
  transition: transform 0.3s, visibility 0s 0s;
    max-height: 70%;
  overflow: scroll;
}

#cd-nav ul.is-visible::-webkit-scrollbar {
    -webkit-appearance: none;
}

#cd-nav ul.is-visible::-webkit-scrollbar:vertical {
    width: 12px;
}

#cd-nav ul.is-visible::-webkit-scrollbar:horizontal {
    height: 12px;
}

#cd-nav ul.is-visible::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

#cd-nav ul.is-visible::-webkit-scrollbar-track {
    border-radius: 10px;  
    background-color: #ffffff; 
}

#cd-nav li a {
   display: block;
  text-decoration: none;
  color: #57585b;
  overflow: hidden;
  width: 95%;
}

.cd-nav-trigger {
  position: fixed;
  bottom: 40px;
  right: 5%;
  width: 45%;
  height: 45px;
  background: #ecb75f;
  white-space: nowrap;
  z-index: 2;
  color: #000000 !important;
  line-height: 45px;
  text-decoration: none;
  text-align: center;
  border-right: 1px solid #57585b;
  border-top: 1px solid #57585b;
  border-bottom: 1px solid #57585b;
}

span.Icontext {
float: left;
  width: 66px;
  white-space: normal;
  line-height: 17px;
  padding-left: 28px;
  padding-top: 4px;
}
.cd-nav-left {  position: fixed;
  bottom: 40px;
  left: 5%;
  width: 45%;
  height: 45px;
  background: #fafafb;
  white-space: nowrap;
  z-index: 2;
  color: #57585b;
  line-height: 45px;
  text-decoration: none;
  text-align: center;
  border-left: 1px solid #57585b;
  border-top: 1px solid #57585b;
  border-bottom: 1px solid #57585b;
 }


.navIcon {font-size: 26px;  vertical-align: middle;}


.rotate{
    -webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
    display: inline-block;
}

.rotate.down{
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
     -ms-transform:rotate(180deg);
    transform:rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cd-nav">
		<a href="#0" class="cd-nav-trigger"><span class="Icontext">subnav</span><span class="rotate ha ha-th navIcon"></span></a>
		<a href="#0" class="cd-nav-left">Compare park</a>
		

		<nav id="cd-main-nav">
			<ul id="navwrapper">
				<li><a href="http://www.google.co.uk">Homepage</a></li>
				<li><a href="#0">Services</a></li>
				<li><a href="#0">Portfolio</a></li>
				<li><a href="#0">Pricing</a></li>
				<li><a href="#0">Contact</a></li>
				<li><a href="#0">Homepage</a></li>
				<li><a href="#0">Services</a></li>
				<li><a href="#0">Portfolio</a></li>
				<li><a href="#0">Pricing</a></li>
				<li><a href="#0">Contact</a></li>
				<li><a href="#0">Homepage</a></li>
				<li><a href="#0">Services</a></li>
				<li><a href="#0">Portfolio</a></li>
				<li><a href="#0">Pricing</a></li>
				<li><a href="#0">Contact</a></li>
			</ul>
		</nav>
	</div>
	

Answer 1

代码运行良好，只有两个小的调整使其完全运行:

1. 将 click 事件监听器附加到 document 而不是 body。

   $(document).on("click", function() {
      $('#navwrapper').removeClass('is-visible');
   }); 
   

   现在你在body中只有一个元素(#cd-nav)，它有position:absolute;这意味着它从文档的常规流程中取出，“清空”body，它的高度将为 0，您将永远无法点击它。因此，将事件处理程序附加到 document 而不是 body。

   注意:这在实际页面上不是必需的，因为我猜你会有更多的内容会占据窗口，但它适用于你在问题中发布的演示。

2. 当打开菜单的元素被点击时停止传播事件。

   $('.cd-nav-trigger').on('click', function(e){
       e.preventDefault();
       e.stopPropagation();
   

   点击事件会冒泡到 body 和 document，所以即使触发器显示它，事件也会冒泡和 click 文档的事件处理程序将隐藏它。你想停止传播以避免这种情况。

---

您可以看到它在此代码中的工作(通过查找下面的注释 //AM 来找到更改):

var offset = 0;

var navigationContainer = $('#cd-nav'),
    mainNavigation = navigationContainer.find('#cd-main-nav ul');


checkMenu();

// AM: add the listener to the document
$(document).on("click", function() {
  $('#navwrapper').removeClass('is-visible')
});

$(window).scroll(function(){
  checkMenu();
});

$('.cd-nav-trigger').click(function(){
  $('.content').toggleClass('static');
})

$('.cd-nav-trigger').on('click', function(e){
  // AM: prevent the default behavior
  e.preventDefault();
  e.stopPropagation();
  $(this).toggleClass('menu-is-open');
  mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');
});

function checkMenu() {
  if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
    navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
      mainNavigation.addClass('has-transitions');
    });
  } else if ($(window).scrollTop() <= offset) {
    //check if the menu is open when scrolling up
    if( mainNavigation.hasClass('is-visible')  && !$('html').hasClass('no-csstransitions') ) {
      //close the menu with animation
      mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
        //wait for the menu to be closed and do the rest
        mainNavigation.removeClass('is-visible is-hidden has-transitions');
        navigationContainer.removeClass('is-fixed');
        $('.cd-nav-trigger').removeClass('menu-is-open');
      });
      //check if the menu is open when scrolling up - fallback if transitions are not supported
    } else if( mainNavigation.hasClass('is-visible')  && $('html').hasClass('no-csstransitions') ) {
      mainNavigation.removeClass('is-visible has-transitions');
      navigationContainer.removeClass('is-fixed');
      $('.cd-nav-trigger').removeClass('menu-is-open');

      //scrolling up with menu closed
    } else {
      navigationContainer.removeClass('is-fixed');
      mainNavigation.removeClass('has-transitions');
    }
  } 
}

#cd-nav  {
  outline: 0px;
  z-index: 1002;
  position: absolute;
  display: block;
}
#cd-nav ul {

  position: fixed;
  width: 90%;

  right: 5%;
  bottom: 80px;
  padding-bottom:20px;
  box-shadow: 0 0 10px rgba(0, 0,0, 0.4);
  background: white;
  visibility: hidden;
  overflow: hidden;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
  transition: transform 0.3s, visibility 0s 0.3s;
}
#cd-nav ul li {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: #ffffff;
  width: 90%;
  padding-bottom: 10px;
  padding-top: 10px;
  margin-left: 5%;
  border-bottom: 1px solid rgb(235, 235, 235);
}
#cd-nav ul.is-visible {
  visibility: visible;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
  transition: transform 0.3s, visibility 0s 0s;
  max-height: 70%;
  overflow: scroll;
}

#cd-nav ul.is-visible::-webkit-scrollbar {
  -webkit-appearance: none;
}

#cd-nav ul.is-visible::-webkit-scrollbar:vertical {
  width: 12px;
}

#cd-nav ul.is-visible::-webkit-scrollbar:horizontal {
  height: 12px;
}

#cd-nav ul.is-visible::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .5);
  border-radius: 10px;
  border: 2px solid #ffffff;
}

#cd-nav ul.is-visible::-webkit-scrollbar-track {
  border-radius: 10px;  
  background-color: #ffffff; 
}

#cd-nav li a {
  display: block;
  text-decoration: none;
  color: #57585b;
  overflow: hidden;
  width: 95%;
}

.cd-nav-trigger {
  position: fixed;
  bottom: 40px;
  right: 5%;
  width: 45%;
  height: 45px;
  background: #ecb75f;
  white-space: nowrap;
  z-index: 2;
  color: #000000 !important;
  line-height: 45px;
  text-decoration: none;
  text-align: center;
  border-right: 1px solid #57585b;
  border-top: 1px solid #57585b;
  border-bottom: 1px solid #57585b;
}

span.Icontext {
  float: left;
  width: 66px;
  white-space: normal;
  line-height: 17px;
  padding-left: 28px;
  padding-top: 4px;
}
.cd-nav-left {  position: fixed;
  bottom: 40px;
  left: 5%;
  width: 45%;
  height: 45px;
  background: #fafafb;
  white-space: nowrap;
  z-index: 2;
  color: #57585b;
  line-height: 45px;
  text-decoration: none;
  text-align: center;
  border-left: 1px solid #57585b;
  border-top: 1px solid #57585b;
  border-bottom: 1px solid #57585b;
}


.navIcon {font-size: 26px;  vertical-align: middle;}


.rotate{
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
  display: inline-block;
}

.rotate.down{
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  transform:rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cd-nav">
  <a href="#0" class="cd-nav-trigger"><span class="Icontext">subnav</span><span class="rotate ha ha-th navIcon"></span></a>
  <a href="#0" class="cd-nav-left">Compare park</a>


  <nav id="cd-main-nav">
    <ul id="navwrapper">
      <li><a href="http://www.google.co.uk">Homepage</a></li>
      <li><a href="#0">Services</a></li>
      <li><a href="#0">Portfolio</a></li>
      <li><a href="#0">Pricing</a></li>
      <li><a href="#0">Contact</a></li>
      <li><a href="#0">Homepage</a></li>
      <li><a href="#0">Services</a></li>
      <li><a href="#0">Portfolio</a></li>
      <li><a href="#0">Pricing</a></li>
      <li><a href="#0">Contact</a></li>
      <li><a href="#0">Homepage</a></li>
      <li><a href="#0">Services</a></li>
      <li><a href="#0">Portfolio</a></li>
      <li><a href="#0">Pricing</a></li>
      <li><a href="#0">Contact</a></li>
    </ul>
  </nav>
</div>