Question

我正在尝试使用javascript和jquery按钮单击来调整div的大小。这些都是asp.net网络表单。我对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>

Answer 1

您必须添加对jQuery库的引用。如果您在自己的网站上拥有它，可以使用以下内容：

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

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

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

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

1 个答案: