通过点击调整 div 的大小？答案

【问题标题】：Resizing div with click?通过点击调整 div 的大小？
【发布时间】：2017-01-26 20:12:13
【问题描述】：

我有一个看起来像这样的webform。这是masterpage 中的div，其中包含多个GridViews：

如您所见，gridviews 占据了大部分空间，所以我想尽量减少它们。我不想使用CollapsiblePanel，因为它会隐藏所有内容。我想隐藏一半的 div/gridviews；像这样的东西：

基本上，我想添加一个可以单击的控件：展开时，它将显示gridview的全高。折叠时，我只会看到div 和网格视图的一小部分。

感谢任何帮助。

谢谢。

【问题讨论】：

标签： c# html asp.net gridview visual-studio-2008

【解决方案1】：

您可以将所有 GridView 包装在一个 div 中，并使用一个指定高度并隐藏溢出的类。然后，当您单击按钮时，它会更改 gridViewContainer 类的类，并将高度设置为 auto。

<div class="small" id="gridViewContainer">
    <asp:GridView ID="GridView1" runat="server"></asp:GridView>
</div>

<input type="button" onclick="toggleGridContent()" value="toggleGridContent" />

<script type="text/javascript">
    function toggleGridContent() {
        var id = "#gridViewContainer";
        if ($(id).hasClass("small")) {
            $(id).attr("class", "large");
        } else {
            $(id).attr("class", "small");
        }
    }
</script>

<style>
    .small {
        height: 200px;
        overflow: hidden;
    }

    .large {
        height: auto;
    }
</style>

【讨论】：

【解决方案2】：

如果您正在使用 Ajax 控件工具包 CollapsiblePanel 是否具有 CollapsedSize/ExpandedSize 属性？

Javascripters 会在客户端使用例如jQuery。事实上，除非你能找到一个开箱即用的 aspx 控件，否则客户端比 ACT 控件要容易得多。类似的东西

<!-- give your divs a class and collapsed/expanded sizes -->
<div class="collapsibleDiv" CollapsedSize="10" ExpandedSize="300"
  style="border: 1px red dashed;"
  >
  <p>-</p>
  ...
  <p>-</p>
</div>


<!-- bottom of page -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $(function() {
  $(".collapsibleDiv").click(
    function() {
      var me = $(this);
      var expandHeight= Number(me.attr('ExpandedSize'))
      var collapseHeight=Number(me.attr('CollapsedSize'));
      var isExpanded= me.height()===expandHeight;
      var targetHeight= isExpanded ? collapseHeight : expandHeight;
      me.animate({ height: targetHeight});
      //or without animation : me.height(targetHeight)
    }
  );
});
</script>

【讨论】：

谢谢。我尝试了你的解决方案，我看到 div 可以调整大小，但 gridview 永远不会隐藏。就好像gridview在div之外一样。
我最终使用了 Ajax 控件工具包 CollapsiblePanel。我不知道它有 CollapsedSize/ExpandedSize 属性。谢谢。