使用 javascript 和 jquery 动态调整 div 的大小？

Question

我正在尝试使用 javascript 和 jquery 通过单击按钮来调整 div 的大小。这一切都在 asp.net 网络表单中。我对 javascript 几乎没有经验，对 jquery 几乎没有经验 none。这是到目前为止我在其他 SO 成员的帮助下获得的代码。除了它不起作用之外，我知道有问题，因为没有显示警报。

感谢任何帮助。

<head id="Head1" runat="server">
    <title>Data Display</title>
    <script type="text/javascript">
        function toggleGridContent() {
            var id = "#gridViewContainer";
            if ($(id).hasClass("small")) {
                alert("found");
                $(id).attr("class", "large");
            } else {
                alert("not");
                $(id).attr("class", "small");
            }
        }
    </script>
    <style type="text/css">
        .small {
            height: 200px;
            overflow: hidden;
        }

        .large {
            height: auto;
        }
    </style>
</head>
<body>
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

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

    <div class="small" id="gridViewContainer" style="border: 1px solid red">
        <asp:GridView ID="GridViewNsbAll" AutoGenerateColumns="false" runat="server">
            <Columns>
                <asp:BoundField DataField="subgroup" HeaderText="subgroup"></asp:BoundField>
                <asp:BoundField DataField="count" HeaderText="count"></asp:BoundField>
            </Columns>
        </asp:GridView>
    </div>

</form>
</body>
</html>

Answer 1

您必须添加对 jQuery 库的引用。如果你的网站上有它，你可以使用这样的东西：

<script type="text/javascript" src="jquery.js"></script>

更简单的方法是 link 到最新的托管版本

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

使用 javascript 和 jquery 动态调整 div 的大小？

Dynamically resizing div w/ javascript and jquery?

javascript

css

asp.net

jquery

visual-studio-2008