Question

我有一个按钮，点击该按钮，我有一个显示和隐藏的div。我用jquery实现了它。但问题是页面加载时，div已经显示。我想要，如果我点击按钮，那么只有div应该是可见的。

这是我的代码：

脚本：

update()

html：

<script>
$(document).ready(function() {
    $('#btn').live('click', function(event) {

        $('#div1').toggle('show');

    });
});
</script>

Answer 1

默认使用CSS隐藏它：

#div1 {
    display: none;
}

请注意，jQuery的live()方法已弃用，不应使用。它被on()取代。此外，您的#div1元素上设置了runat="server"属性，这意味着ASP.Net将在运行时自动为该元素生成id属性。您需要使用id方法检索ClientID：

$(document).on('click', '#btn', function() {
    $('#<%= div1.ClientID %>').toggle();
});

Answer 2

您应该使用CSS将display:none设置为#div1。使用：

#div1{
   display:none;
}

即使不是首选，您也可以使用JS在page load内的document.ready()隐藏div，因此请使用.hide()并使您的脚本变为：

<script>
        $(document).ready(function ()
        {
         $('#div1').hide(); //ADD THIS
         $('#btn').live('click', function (event)
            {

                $('#div1').toggle('show');

            });
        });
    </script>

Answer 3

你可以用这个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input type="button" id="btn" class="btncss" value="show" />
        <div id="div1" runat="server" style="height:300px;width:300px;background-color:#f3fbd6; display: none;">
            <table>
                <tr>
                    <td>
                    <asp:TextBox ID="txt" runat="server" TextMode="MultiLine"></asp:TextBox>
                    </td>
                </tr>

                <tr>
                    <td>
                        <asp:DropDownList ID="ddl" runat="server"></asp:DropDownList>
                    </td>
                </tr>
            </table>
            <hr />
            <table>
                <tr>
                    <td>
                        <asp:Button ID="btncancel" runat="server" Text="cancel" />
                    </td>
                    <td>
                        <asp:Button ID="btnFilter" runat="server" CssClass="btncss" Text="Filter" />
                    </td>
                </tr>
            </table>
        </div>

display: none;

为＃div1设置restrict" 'C'并使用我的脚本

Answer 4

由于#div1元素的runat="server"表示您使用的是asp.net，因此您应该使用Control.ClientID

应该使用CSS类来隐藏元素以及其他CSS规则

.myDiv {
    display: none; //Hide it using CSS
    height:300px;
    width:300px;
    background-color:#f3fbd6;
}

HTML ，将CSS类添加到div

<div id="div1" runat="server" class="myDiv">
</div>

脚本

$('#btn').live('click', function (event)
    $('.myDiv').toggle();
    //Or, You can use Control.ClientID
    $("#<%= div1.ClientID %>").toggle();
});

使用jquery在按钮单击时使div不可见和可见

4 个答案: