动态调整div的大小，w/javascript和jquery

我正在尝试使用javascript和jquery通过单击按钮来调整div的大小。这一切都在一个 asp.net 的 Web 表单中。我对javascript几乎没有经验，对jquery几乎没有经验。这是我迄今为止在其他 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>

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

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

更容易的是链接到最新的托管版本

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

相关内容

最新更新

热门标签：