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

我有一个按钮，点击这个按钮，我有一个div可以显示和隐藏。我使用jquery实现了它。但问题是当页面加载时，div已经显示出来了。我想知道，若我点击按钮，那个么只有div是可见的

这是我的代码：

脚本：

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

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

    });
});
</script>

$（文档）.ready（函数（）{
$（'#btn'）.live（'click'，函数（事件）{
$（'#div1'）。切换（'show'）；
});
});

html:

<input type="button" id="btn" class="btncss" value="filter" />
<div id="div1" runat="server"  style="height:300px;width:300px;background-color:#f3fbd6">
    <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>

默认情况下，使用CSS将其隐藏：

#div1 {
    display: none;
}

请注意，jQuery的

live（）

方法已被弃用，不应使用。它被（）上的

替换为
。另外，您的
#div1
元素上设置了
runat=“server”
属性，这意味着ASP.Net将在运行时自动为该元素生成一个
id
属性。您需要使用
ClientID
方法检索该
id
：

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

$（文档）.on（'click'，'btn'，function（）{
$（'#'）。切换（）；
});
您应该使用CSS将
display:none
设置为
#div1
。
使用：

尽管不推荐使用JS，但您可以在
页面加载
中的
document.ready（）
中使用JS隐藏您的div，因此使用
.hide（）
，您的脚本将变为：

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

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

            });
        });
    </script>


$（文档）.ready（函数（）
{
$（'#div1'）.hide（）；//添加此
$（'#btn'）.live（'click'，函数（事件）
{
$（'#div1'）。切换（'show'）；
});
});
因为您的
#div1
元素有
runat=“server”
表示您正在使用，所以您应该使用

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'，函数（事件）
$（'.myDiv'）.toggle（）；
//或者，您可以使用Control.ClientID
$（“#”）切换（）；
});
您可以使用此


$（'input'）。单击（函数（）{
如果（$（'input'）.val（）=“show”）{
$（'div1'）。show（'700'）；
$（'input'）.val（“隐藏”）；
}否则{
$（'#div1'）。隐藏（'700'）；
$（'input'）.val（“show”）；
};
});


更好地使用
CSS
隐藏为什么使用CSS更好？当JS加载缓慢（或出现错误）时，这将导致错误。是的，最好使用CSS，这是一种替代方法。但是OP要求在JQUERY中找到解决方案。“我会更新答案的。@NikhilBatra:如果一个OP要求一个
jQuery
解决方案将
2
乘以
4
，你不会告诉他使用这个叫做native JS的神奇库吗？@Satpal:为什么不呢？@Cerbrus，OP正在使用ASP.Net，因此元素的ID可能不是
div1
，因此它不会work@Cerbrus因为当您将
runat=“server”
属性应用于元素时，ASP.Net会更改其
id
，以便跟踪该元素。此
id
在每次重新加载页面时都会更改，并且与您最初指定的内容不匹配，因此您必须使用
ClientID
属性来检索它。我尝试了
on（）
方法，但它停止了工作。版本问题？？如果您使用的是比jQuery 1.7旧的版本，则可能会出现问题。如果是这样，您应该真正更新。如果我不使用runat=“server”，那么我就不能使用div1.ClientID，对吗？@DinavAhire每当您使用服务器端控件时，请始终使用Javascript中的
Contol.Client
，如果我正在编写
runat=“server“
，而不是写
div1.ClientID
，我仍然得到我的output@DinavAhire，则必须将某个位置的
clientdmode
设置为
Static
read
<div id="div1" runat="server" class="myDiv">
</div>

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