点击button改变div的显示隐藏

最新推荐文章于 2023-09-02 01:58:38 发布

原创最新推荐文章于 2023-09-02 01:58:38 发布 · 5.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #jQuery #点击按钮显示隐藏div

前端开发专栏收录该内容

8 篇文章

订阅专栏

本文作者通过回顾自己早期编写的代码片段，分享了从初学者到熟练掌握技能的心路历程。文章中提及了一个简单的jQuery插件实现，该插件用于在页面上动态显示和隐藏一个包含输入框和标签的div元素。作者通过这个实例展示了如何使用jQuery选择器和CSS的display属性来控制DOM元素的可见性。此外，文章还提供了HTML代码示例，详细介绍了如何在页面上创建和布局这些交互元素。

看着以前自己写的这些小例子，现在看看都有点觉得好笑，是自己以前不懂还是现在已经老了？但是自己还是转存过来了，因为我喜欢。

jquery:

$("input[name=add_group]").click(function() {

    if ($("#add_group_div").css("display") == "none") {

    $("#add_group_div").show(500,null);

} else {

    $("#add_group_div").hide();

}

html：

<input type="button" name="add_group" id="add_group" value="add_group" />

<div id="add_group_div" style="display: none;">

    <label>description</label>  <input type="text" id="description" /><br /><br />

    <label>start_serial</label>  <input type="text" id="start_serial" /><br /><br />

    <label>end_serial</label>  <input type="text" id="end_serial" /><br /><br />

    <input type="button" value="submit" />

</div>