2
嗨已經在菜單中加入了一個div。爲了支持使用jquery打開和關閉而不是使用css的觸摸設備。與正常的菜單一起工作，但似乎無法讓它在放入div時起作用。打開div菜單上點擊並關閉mouseleave並點擊
我明白，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;
}
});
收盤點擊
小提琴
https://jsfiddle.net/LkLazo02/4/
你得到任何錯誤？ – RRK
在開發者視圖中，在Firefox中？或者我想讓它在控制檯中運行 – alwayslearning
。 – RRK