您已将div添加到菜单中。为了支持触摸设备我使用Jquery打开和关闭而不是使用CSS。使用普通菜单，但似乎无法在删除div时使其正常工作。
据我所知，div是李的一个孩子并且已经瞄准了它，但是它关闭但是默认情况下我相信，因为它关闭而不是很好地滑行。然后菜单也会在此之后悬停打开和关闭。
仍然试图让它在点击时关闭，但代码也不好。
HTML ------
<ul id="mainmenu" style="width:300px; float:right;">
<!--1st-->
<li class="mainmenudrop"><a href="" class="dropsmall">Contact Us</a>
<div class="dropout_1dropbox">
<div class="dropbox_1">
<h2>Request Call Back</h2>
<p style="font-size:11px; margin-left:1px;">Please enter your telephone number and we will contact you shortly.</p>
<form action='feedback' accept-charset='utf-8' method='post'>
<input type='hidden' name='send_email' value='yes' />
<p>Tel:
<input class="norminput" name="Telephone" type="text" maxlength="25" style="font-size:13px; height: 14px; width:164px; margin-left:1px;" />
<input class="btn grey bbig" name="" value="Go" type="submit" style="width:50px; margin-left:10px; font-size:13px; height: 23px; line-height:13px;" />
</p>
</form>
<h2>Email Us</h2>
<form action='feedback' accept-charset='utf-8' method='post'>
<input type='hidden' name='send_email' value='yes' />
<p style="font-size:11px; margin-left:1px;">If you have any questions please email us:</p>
<p>Email:
<input class="norminput" name="Name" type="text" size="20" style="font-size:13px; height:14px; width:145px; margin-left:1px;" />
<input class="btn grey bbig" name="" value="Send" type="submit" style="width:50px; margin-left:10px; height: 23px; line-height:13px; font-size:13px;" />
</p>
<p>
<textarea id="textareae" style="width:247px; margin:2px 0px 0px 1px;" name="Questions" cols="1" rows="3"></textarea>
</p>
</form>
</div>
</li>
<!--2nd-->
<li class="mainmenudrop"><a href="" class="dropsmall">My Account</a>
</li>
<!--3rd-->
<li class="mainmenudrop"><a href="" class="dropsmall">Login</a>
<div class="dropout_1dropbox">
<div class="dropbox_1">
<h1>uiuhu</h1>
</div>
</div>
</li>
</ul>
的CSS -----
#mainmenu {
list-style:none;
}
#mainmenu li {
float:right;
display: block;
height:27px;
line-height:27px;
position:relative;
border:none;
z-index:999;
cursor: default;
}
#mainmenu li:hover {
background: #444489;
}
#mainmenu li a {
font-family: Verdana, Arial;
font-size:11px;
color: #DFDFF0;
display:block;
text-decoration:none;
}
#mainmenu li:hover a {
color: #fff;
}
#mainmenu li .dropsmall {
padding: 0 7px 0px 4px;
}
#mainmenu li:hover .dropsmall {
}
.dropout_1dropbox {
margin:2px auto;
float:left;
position:absolute;
left:-999em;
/* Hides the drop down */
text-align: left;
padding:7px 7px 7px 7px;
border:1px solid #aaa;
border-top:none;
border-radius: 0px 3px 3px 3px;
background: #444489;
display: none;
}
.dropout_1dropbox {
width: 270px;
}
#mainmenu li:hover .dropout_1dropbox {
left:auto;
right:-1px;
top:23px;
border-radius: 3px 3px 3px 3px;
}
.dropbox_1 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
text-align:left;
width:260px;
}
#mainmenu p, #mainmenu h2, #mainmenu h3, #mainmenu ul li {
font-family: Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align: left;
color: #eee;
}
#mainmenu h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:400;
margin:7px 0 14px 0;
padding-bottom:4px;
border-bottom:1px solid #ff4200;
text-align: left;
}
#mainmenu p {
line-height:16px;
margin:0 0 10px 0;
}
#mainmenu li:hover div a {
font-size:11px;
color:#4FA4F9;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
#mainmenu li:hover div a:hover {
color:#888;
}
#mainmenu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#mainmenu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 0 1px 0 #FFF;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#mainmenu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
.arrowb {
float:left;
height: 12px;
width: 13px;
margin: 5px 3px 0 0;
background: url("../images/arrowbloa.png") no-repeat 0px 5px;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
.menubarright li:hover #rotateb {
background: url("../images/arrowblo.png") no-repeat 0px 5px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
JQuery ---
$('a.dropsmall').click(function (e) {
$(this).next("div").slideDown(200, 'easeOutCirc');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li.mainmenudrop').mouseleave(function () {
$(this).parent("div").slideUp(300, 'easeInOutQuad');
});
$.extend($.easing,
{
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
}
});
点击
关闭拨弄
答案 0 :(得分：1)
这些导致了这个问题：
.dropout_1dropbox {
left:-999em; /* Hides the drop down */
display: none;
}
#mainmenu li:hover .dropout_1dropbox{
left:auto;
right:-1px;
}
$('li.mainmenudrop').mouseleave(function() {
$(this).parent("div").slideUp(300,'easeInOutQuad');
});
left:-999em是因为它不再处于悬停状态而导致鼠标悬停时丢失消失的原因，因此left:auto和right:-1px不再适用。
没有理由将下拉列表设置为屏幕外以及不显示。您可以在整个时间内将下拉列表放在正确的位置，但不会显示。
.dropout_1dropbox {
left:auto;
right:-1px;
display: none;
}
您的slideUp选择器不正确。它应该是：
$('li.mainmenudrop').mouseleave(function() {
$(this).children("div").slideUp(300,'easeInOutQuad');
});
https://jsfiddle.net/LkLazo02/6/
原始回答
jQuery在不使用插件的情况下提供的唯一缓动函数是swing和linear。您正在尝试使用仅在jQuery UI中提供的easeOutCirc。
如slideDown所示：
从jQuery 1.4.3开始，可以使用命名缓动函数的可选字符串 使用。缓动函数指定动画的速度 在动画中的不同点上进展。 唯一的宽松 jQuery库中的实现是默认的，称为swing， 并且以恒定的速度前进，称为线性。更轻松 函数可以使用插件，最值得注意的是 jQuery UI套件。
如果您检查控制台，则会收到错误：
Uncaught TypeError: jQuery.easing[this.easing] is not a function