javascript - 侧边菜单悬停关闭延迟问题

Question

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

我正在使用 CSS (Bootstrap) 来格式化整个幻灯片。我可以通过将鼠标悬停在打开然后关闭鼠标滑出时关闭它来使它正常工作(您可以取消注释第一组 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;
}