Question

我有一个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>应该会滑动。

Answer 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();
    }
});

Answer 2

这将有效

$(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中点击，你也需要小心。

Answer 3

好吧，我有办法解决它，希望它能为你工作，请带一个容器div或者让我们拿一个body标签（大小是这样的，它覆盖了整个页面，例如100％）并添加它是一个onclick事件，并在那个事件中向上滑动div.Take关注您的Container div或Body标签应覆盖整个页面的事实，以便它看起来像用户点击页面上的任何位置。这就是诀窍

让我知道它是否有帮助。

如何在页面的任何位置向上滑动div

3 个答案: