关闭菜单onbody点击和生物体 [英] close menu onbody click and animate body

问题描述

我之前提出过此问题，但所有答案都无效，因此我有一个示例页面，网页。我有一个菜单重新调整大小，我想关闭菜单，当一个人点击菜单外，以及当下拉菜单第一次切换时，body的动画向下，以便下拉菜单不隐藏任何内容。 / p>

  
  / * cd-main-nav ul.is-visible0 { -webkit-transform：translateY（70px）; -moz-transform：translateY（70px）; -ms-transform：translateY（70px）; -o-transform：translateY（70px）; transform：translateY（70px）;}  
 
 < nav class =cd-main-nav> < ul> < li>< a href =../ index.html>首页< / a>< / li> < li class =current2>< a href =mon.html>星期一< / a>< / li> < li>< a href =tue.html> Tue< / a>< / li> < li>< a href =wed.html>星期三< / a>< / li> < / ul>< / nav>  
 

解决方案

找到代码。

  jQuery（document）.ready（function（$）{// open-close submenu on mobile $（'。cd-main-nav'）。on（'click'，function（event）{$（this）.children（'ul'）。toggleClass（'is-visible0'）;}）;} ）; window.addEventListener（'mouseup'，function（event）{var box = document.getElementById（'menu-c'）; if（event.target！= box&& event.target.parentNode！ cd-main-nav  {$（'。cd-main-nav'）。children（'ul'）。removeClass（'is-visible0'）;}}）; code> 

I've asked this before but all answers don't work so I have a sample page, webpage. I have a menu that re-sizes, I want to close the menu when one clicks outside the menu as well as for the body to animate downward when the dropdown is first toggled so that the drop down menu doesn't hide any content.

jQuery(document).ready(function($) {
  //open-close submenu on mobile
  $('.cd-main-nav').on('click', function(event) {
    $(this).children('ul').toggleClass('is-visible0');
  });
});

/*when the drop down is toggled*/

.cd-main-nav ul.is-visible0 {
  -webkit-transform: translateY(70px);
  -moz-transform: translateY(70px);
  -ms-transform: translateY(70px);
  -o-transform: translateY(70px);
  transform: translateY(70px);
}

<nav class="cd-main-nav">
  <ul>
    <li><a href="../index.html">Home</a></li>
    <li class="current2"><a href="mon.html">Mon</a></li>
    <li><a href="tue.html">Tue</a></li>
    <li><a href="wed.html">Wed</a></li>
  </ul>
</nav>

解决方案

found the code.

jQuery(document).ready(function($) {
  //open-close submenu on mobile
  $('.cd-main-nav').on('click', function(event) {
    $(this).children('ul').toggleClass('is-visible0');
  });
});


window.addEventListener('mouseup', function(event) {
  var box = document.getElementById('menu-c');
  if (event.target != box && event.target.parentNode != box) {
    $('.cd-main-nav').children('ul').removeClass('is-visible0');
  }
});

//id="menu-c" on cd-main-nav

这篇关于关闭菜单onbody点击和生物体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！