jquery - 使用 jquery 显示/隐藏 asp 占位符

Question

CSS:

.comments{cursor:pointer;}
.hidediv{visibility:hidden;}

HTML:

<span id="agreeComments" class="comments b">Comments</span><br /><br />
    <div id="divAgree" class="hidediv">
      <asp:PlaceHolder runat="server" ID="plcAgreements" ClientIDMode="Inherit" />
    </div>

jquery:

<script>
        $(document).ready(function () {
            $("#agreeComments").click(function () {
                if ($("#divAgree").is(":hidden")) {
                    $("#divAgree").slideDown("slow");
                } else {
                    $("#divAgree").slideUp("slow");
                    $("#plcAgreements").show();
                }
            }
            );
        });
    </script>

我正在使用上面的代码来使用jquery隐藏和显示div。我在 div 中有一个 asp 占位符控件。我需要在加载页面时隐藏 div，并且需要在单击评论范围时显示或隐藏。 Div 正在隐藏，但问题是它占用了 asp 占位符的空间。

Answer 1

改变这个

.hidediv{visibility:hidden;}

至

.hidediv{display:none;}

因为 visibility:hidden; 保留隐藏元素的宽度和高度，而 display:none; 则不会。

查看此问题以获取更多信息 What is the difference between visibility:hidden and display:none?