使用jQuery在按钮点击时使div不可见和可见

Question

我有一个按钮，点击该按钮后，我有一个div要显示和隐藏。我使用jQuery实现了这一点。但问题是当页面加载时，div已经显示出来了。我希望只有在单击按钮时才能看到div。

这是我的代码：

脚本：

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

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

    });
});
</script>

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>

- Dinav Ahire

Answer 1

使用CSS默认隐藏它：

#div1 {
    display: none;
}

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

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

- Rory McCrossan

---

@Satpal：为什么不行呢？ - Cerbrus

@Cerbrus，OP正在使用ASP.Net，因此元素的ID可能不是div1，因此它将无法工作。 - Satpal

如果你使用的是比jQuery 1.7更旧的版本，那么可能会出现这种情况。如果是这样，你应该尽快更新。 - Rory McCrossan

@Cerbrus 完全正确。这是 WebForms 糟糕的原因之一。 - Rory McCrossan

是的，先生，我正在使用旧版本。所以 live() 代码对我有效。 - Dinav Ahire

Answer 2

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

#div1{
   display:none;
}

即使不推荐使用，您仍然可以在document.ready()中使用JS来隐藏您的

标签，因此使用.hide()函数，您的脚本将变为：

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

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

            });
        });
    </script>

- Nikhil Batra

---

最好使用CSS来隐藏。 - Tushar

为什么使用CSS更好？ - Dinav Ahire

当JS加载缓慢（或存在错误）时，这将导致[FOUC]（https://en.wikipedia.org/wiki/Flash_of_unstyled_content）的出现。 - Cerbrus

是的，最好使用CSS，这是其中一种替代方案。但是OP要求使用JQUERY解决方案。我会更新答案的。 - Nikhil Batra

如果一个 OP 要求使用 jQuery 解决将 2 乘以 4 的问题，你会不会告诉他使用这个神奇的叫做原生 JS 的库呢？@NikhilBatra - Cerbrus

@Cerbrus，我明白你的意思了，所以我编辑了答案并加上了说明 :) - Nikhil Batra

Answer 3

你可以使用这个。

$('input').click(function() {
   if ($('input').val() === "show") {
      $('#div1').show('700');
      $('input').val("hide");
   } else{
      $('#div1').hide('700');
      $('input').val("show");
   };
});

<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>

将 #div1 的 display: none; 设为隐藏，并使用我的脚本。

- koorosh safeashrafi

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

- Satpal

---

如果我不使用 runat="server"，那么我就无法使用 div1.ClientID，对吗？ - Dinav Ahire

@DinavAhire 每当您使用服务器端控件时，请始终在 JavaScript 中使用 Contol.Client。 - Satpal

如果我写了 runat="server"，但没有写 div1.ClientID，我仍然可以得到输出。 - Dinav Ahire

如果使用@DinavAhire，则必须将ClientIDMode设置为Static，请参阅https://msdn.microsoft.com/zh-cn/library/system.web.ui.clientidmode(v=vs.110).aspx。 - Satpal