单击调整大小 div？

Question

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

如您所见，网格视图占据了大部分 space，因此我想将它们最小化。我不想使用 CollapsiblePanel 因为它会隐藏所有内容。我想隐藏一半div/gridviews；是这样的：

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

感谢任何帮助。

谢谢。

Answer 1

您可以将所有 GridView 包裹在 div 中，并使用 class 指定高度并隐藏溢出。然后，当您单击该按钮时，它会更改 gridViewContainer 的 class 的 class，高度设置为 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>

Answer 2

Ajax Control Toolkit 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？

Resizing div with click?

html

c#

asp.net

gridview

visual-studio-2008