我有一个div。我通过jquery函数myjquery函数滑动并向下滑动
<script type="text/javascript">
jQuery(window).load(function () {
$("#nav > li > a").click(function () { // binding onclick
if ($(this).parent().hasClass('selected')) {
$("#nav .selected div div").slideUp(700); // hiding popups
$("#nav .selected").removeClass("selected");
} else {
$("#nav .selected div div").slideUp(400); // hiding popups
$("#nav .selected").removeClass("selected");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".subs").children().slideDown(200);
}
}
});
});
</script>
和html是
<ul id="nav">
<li><a href="#"><b>Login</b></a>
<div class="subs">
<div>
<ul>
<table style="margin-right:12PX;width:200px;overflow:scroll;">
<tr style="width:70px"><td>Mobile Number</td></tr>
<tr> <td><asp:TextBox runat="server" ID="TextBox1" CssClass="selectfield" Width="170px"/></td>
</tr><tr><td>Password</td></tr><tr><td><asp:TextBox runat="server" ID="TextBox2" TextMode="Password" Width="170px" CssClass="selectfield" /></td></tr>
<tr style="height:5px;"><td></td></tr>
<tr><td>
<asp:Button ID="Button1"
runat="server" Text="Login" CssClass="btn" onclick="Button1_Click" /></td></tr>
<tr><td style="color:Red;">
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="link">Forget Password</asp:LinkButton></td></tr>
</table>
</ul>
当我点击登录时,div sub会向下滑动并再次点击登录div滑动。它完美运行。我想点击登录div时应该向下滑动。之后点击除<div>
以外的页面上的任何位置。 <div>
应该会滑动。
答案 0 :(得分:1)
检查这个工作小提琴:http://jsfiddle.net/WxcLV/10/
而不是click
使用mouseup
进行尝试,如下所示:
$('#loginButton').mouseup(function(login) {
$('#loginBox').toggle();
$('#loginButton').toggleClass('active');
});
$('#loginTable').mouseup(function() {
// to avoid hiding div
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
$('#loginButton').removeClass('active');
$('#loginBox').hide();
}
});
答案 1 :(得分:1)
这将有效
$(document).bind("click", function (event) {
if (!$(event.target).is('.subs') && $(event.target).closest('.subs').length==0) {
$("#nav .selected div div").slideUp(700);
$("#nav .selected").removeClass("selected");
}
});
如果你在div中点击,你也需要小心。
答案 2 :(得分:0)
让我知道它是否有帮助。