侧面菜单悬停关闭延迟问题

Question

我是javascript / jQuery的新手。 我正在尝试创建一个侧面菜单（滑出式抽屉）。 我一切正常，但是当我关闭抽屉时，带有“关闭”按钮的“标签”部分不会随着抽屉的其余部分一起关闭，因为它会继续悬停并保持打开状态。

我正在使用CSS（引导程序）格式化整个幻灯片。 我可以通过将其悬停在滑出时将其悬停然后关闭来使其工作正常（您可以取消注释第一组js，以仅通过悬停效果来查看其工作原理，这很顺利，这就是我需要的方式）使用关闭按钮），但是我需要使其保持打开状态，以便用户可以浏览菜单，因此，要关闭菜单，我添加了一个关闭按钮图像，需要单击这些图像以将其关闭。

我设置了一个jsfiddle，这样您在单击以关闭幻灯片时便可以确切地看到问题。 下面是我的代码。 任何帮助，将不胜感激。 这是jsfiddle链接： https ://jsfiddle.net/wtLge8te/2/

 // add/remove hover class on hover /*$("#slideoutNav").hover(function() { $(this).addClass("hover"); }, function() { $(this).removeClass("hover"); });*/ // add hover class on mouseenter $("#slideoutNav").on("mouseenter", function() { slideoutHover(); }); function slideoutHover() { var slideout = $("#slideoutNav"); // unbind mouseenter for slideout $(slideout).off("mouseenter"); // start slideout open animation $(slideout).addClass("hover"); // clicking X button will close slideout $(slideout).find("a#slideoutBtn").on("click", function() { // turn off click binding $(this).off("click"); // remove slideout $(slideout).removeClass("hover"); // wait 1.5 seconds before activating hover again so it can slide back in without interuption window.setTimeout(function() { // setup mouseenter binding again $(slideout).on("mouseenter", function() { slideoutHover(); }); }, 1500); }); } 

 /* =========================== --- slideout drawer navigation ============================ */ #slideoutNav { position: fixed; top: 85px; left: 0; width: 35px; height: 75px; /*padding: 12px 0;*/ text-align: center; background: #568388; background-repeat: no-repeat; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; z-index: 999; } #slideoutNav a#slideoutBtn { background: url("http://techtalk.pcpitstop.com/wp-content/uploads/menuClose.png") no-repeat scroll; height: 75px; display: block; } #slideout_innerNav { position: fixed; top: 85px; left: -285px; background: #568388; width: 285px; padding: 25px 25px 10px 25px; height: auto; color: #fff; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; text-align: left; -webkit-border-radius: 0 0 5px 0; -moz-border-radius: 0 0 5px 0; border-radius: 0 0 5px 0; z-index: 999; } #slideout_innerNav h2 { color: #fff; margin-bottom: 5px; margin-top: -10px; } #slideout_innerNav p { font-size: 16px; } #slideout_innerNav textarea { width: 190px; height: 100px; margin-bottom: 6px; } /* #slideoutSupport:hover { left: 305px; } #slideoutSupport:hover #slideout_innerSuppport { left: 0; } */ #slideoutNav:hover, #slideoutNav.hover { left: 285px; } #slideoutNav.hover { left: 285px; } #slideoutNav.hover a#slideoutBtn { background-image: url("http://techtalk.pcpitstop.com/wp-content/uploads/menuOpen.png"); } #slideoutNav.hover #slideout_innerNav { left: 0; } * { padding: 0; margin: 0; } body { font: 16px/1 sans-serif } /*VERTICAL MENU*/ nav.vertical { position: relative; background: #7bbab9; } /* ALL UL */ nav.vertical ul { list-style: none; } /* ALL LI */ nav.vertical li { position: relative; } /* ALL A */ nav.vertical a { display: block; color: #eee; text-decoration: none; padding: 10px 15px; transition: 0.2s; } /* ALL A HOVER */ nav.vertical li:hover>a { background: #98ad38; } /* INNER UL HIDE */ nav.vertical ul ul { background: rgba(0, 0, 0, 0.1); padding-left: 20px; transition: max-height 0.2s ease-out; max-height: 0; overflow: hidden; } /* INNER UL SHOW */ nav.vertical li:hover>ul { max-height: 500px; transition: max-height 0.25s ease-in; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="slideoutNav"> <a href="javascript:;" id="slideoutBtn"></a> <div id="slideout_innerNav"> <h3>Quick Links</h3> <nav class="vertical"> <ul> <li><a href="index.html">Home</a></li> <li><a href="#">Church +</a> <ul> <li><a href="#">Welcome</a></li> <li><a href="#">What We Believe</a></li> <li><a href="#">Become a Member</a></li> <li><a href="#">Bible Studies</a></li> <li><a href="#">FAQs</a></li> </ul> </li> <li><a href="#">K-5 School +</a> <ul> <li><a href="#">Welcome</a></li> <li><a href="#">Admissions</a></li> <li><a href="#">Classrooms</a></li> <li><a href="#">Tuition</a></li> <li><a href="#">FAQs</a></li> </ul> </li> <li><a href="#">Preschool +</a> <ul> <li><a href="#">Welcome</a></li> <li><a href="#">Calendar</a></li> <li><a href="#">Lunch Menu &amp; news</a></li> <li><a href="#">Summer Care</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Tuition/Fees</a></li> </ul> </li> </ul> </nav> </div> </div> <!-- /#slideoutNav --> 

Answer 1

我对您的jsfiddle进行了更新。

https://jsfiddle.net/wtLge8te/6/

但是，这是CSS的主要更改。

#slideoutNav {
  position: fixed;
  top: 85px;
  left: -285px;
  height: auto;
  width: 285px;
  /*padding: 12px 0;*/
  text-align: center;
  background: #568388;
  background-repeat: no-repeat;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  z-index: 999;
}
#slideoutNav a#slideoutBtn {
  background: #568388 url("http://techtalk.pcpitstop.com/wp-content/uploads/menuClose.png") no-repeat 0px 0px;
  width: 35px;
  height: 75px;
  display:block;
  position: absolute;
  right: -35px;
  top: 0px;
}
#slideout_innerNav {
  background: #568388;
  width: 285px;
  padding: 25px 25px 10px 25px;
  height: auto;
  color: #fff;
}

#slideoutNav.hover {
    left: 0px;
}

Answer 2

我查看了您的总体结构，并提出了一种性能更高，更精益的方法。 您想使用菜单上沿左边缘fixed的位置，然后使用translateX(-100%)将菜单移出屏幕。 然后将打开/关闭链接放置在其内部， absolute /顶部/右侧，然后使用translateX(100%)将其推到菜单之外。 然后，只需单击操作translateX()的打开/关闭链接即可切换一个类，隐藏并显示菜单。 转换transform属性将获得GPU加速，并且不会引起动画的性能问题。

 var $menu = $('.menu'), $open = $(".open"); function setHover() { $menu.addClass('hover'); $open.text('close'); } $menu.not('.hover').on('mouseover', function() { setHover(); }); $open.on('click',function() { if ($menu.hasClass('hover')) { $(this).text('open'); $menu.off('mouseover').removeClass('hover').on('transitionend', function() { $(this).removeClass('hover'); $(this).on('mouseover', function() { setHover(); }).off('transitionend'); }); } else { setHover(); } }) 

 .menu { position: fixed; top: 0; left: 0; transform: translateX(-100%); transition: transform .25s; } .open { position: absolute; top: 0; right: 0; transform: translateX(100%); } .hover { transform: translateX(0); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menu"> sidemenu <a href="#" class="open">open</a> </div>