【发布时间】：2017-04-29 00:43:06
【问题描述】：
我是 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 & 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 -->【问题讨论】：
标签： javascript jquery html css twitter-bootstrap