0

我有一个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>
                                &nbsp;<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>应该向上滑动。

4

3 回答 3

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();
    }
});
于 2013-10-09T06:13:44.997 回答
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 内部单击，您还需要小心。

于 2013-10-09T06:42:33.587 回答
0

好吧，我有办法解决它，希望它对你有用，请使用 Container div 或让我们使用 body 标签（其大小可以覆盖整个页面，例如 100%）并添加一个 onclick事件并在该事件中向上滑动 div。请注意您的 Container div 或 Body 标签应该覆盖整个页面，以便看起来用户正在单击页面上的任何位置。这就是诀窍

让我知道它是否有帮助。

于 2013-10-09T06:12:11.377 回答