如何最大化和最小化div(没有jquery只有javascript)

2024-04-02

你好,我需要仅使用javascript而不是jquery来最大化或最小化我的html页面中的div,我希望能够这样做http://jsfiddle.net/miqdad/Qy6Sj/1/ http://jsfiddle.net/miqdad/Qy6Sj/1/

$("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
    }
    else{
        $(this).html("-");
    }
    $("#box").slideToggle();
});

这正是我想要的,但没有 jquery

但是没有 jquery 只有 javascript,有人可以帮助我吗,我在谷歌上到处搜索,找不到答案


一个简单的谷歌搜索得出:

https://www.itcodar.com/javascript/expand-div-on-click-with-smooth-animation.html#:~:text=How%20to%20display%20a%20div%20with%20a%20smooth,transition%20must%20include%20the%20change%20of%20height.%20Thus%3A
function seeMore() {
  const text = document.getElementById('website-info-idea')
  const text2 = document.getElementById('website-info-technical')
  text.classList.toggle("show")
  text2.classList.toggle("show")
}
.col {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: all 1s ease-in-out;
}

.col.show {
  opacity: 1;
  height: 23px;
  transition: all 1s ease-in-out;
}

#a1 {
  display:inline-block;
  border: solid 2px black;
}
<div id='a1'>
  <a onclick="seeMore()" class="btn btn-secondary btn-md btn-custom">About this Website</a>

  <div class="col" id="website-info-idea">Idea</div>
  <div class="col" id="website-info-technical">Technical</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何最大化和最小化div(没有jquery只有javascript) 的相关文章

  • 使用 css 简单地将对象居中,无需修改

    我想使用 CSS 将对象居中 而不需要任何技巧 这可能吗 如何实现 我已经尝试过了 但是我的 p 标签消失了 centered position fixed top 50 left 50 有多种方法可以使元素居中 但这取决于您的元素是什么以
  • Chrome 中的性能问题

    我目前正在从事一个相对较大的项目 使用 AngularJs 构建 应用程序的一部分是一个表单 您可以向其中添加任意数量的页面 不幸的是 添加了很多不必要的垃圾 即表示表单模型的对象可能会变得非常大 在某些时候 Chrome 基本上无法处理它
  • 如何更改 Google Maps v3 API for Directions 中的开始和结束标记图像

    我使用 DirectionsRender 绘制了一条路线 但我不知道如何用我自己的标记替换通用的 Google 标记 我知道并在正常的谷歌地图情况下使用它 但发现很难用开始和结束的方向标记来做到这一点 如果这是一个愚蠢的问题 感谢您的任何建
  • 如何在codeigniter中将上传图片比例限制为16:9?

    这是我用来上传图像的代码 this gt load gt library upload ext pathinfo file name PATHINFO EXTENSION img name now ext imgConfig upload
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状
  • 在打字稿中导入 json

    我是 typescript 的新手 在我的项目中 我们使用 typescript2 在我的要求之一中 我需要导入 json 文件 所以我创建了 d ts 文件如下 test d ts declare module json const va
  • 如何纠正流警告:解构(缺少注释)

    我正在编写一个小型 React Native 应用程序 并且正在尝试使用 Flow 但我无法在任何地方真正获得有关它的正确教程 我不断收到错误 destructuring Missing annotation 有关 station 这段代码
  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre
  • HTML5 MediaSource 适用于某些 mp4 文件,但不适用于其他文件(相同的编解码器)

    我正在玩 MediaSource API 代码直接取自 Mozilla 的示例页面 https developer mozilla org en US docs Web API MediaSource endOfStream https d
  • 如何制作没有 ng-repeat 的模板并使用 Angular-drag-and-drop-lists 将数据传递到 $scope?

    我想用角度拖放列表 https github com marceljuenemann angular drag and drop lists使用我自己的网格模板到所见即所得编辑器 如何构建我自己的 HTML 模板而不需要ng repeat因
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 为什么我们在打字稿中使用 HTMLInputElement ?

    我们为什么使用 document getElementById ipv as HTMLInputElement value 代替 document getElementById ipv value 功能getElementById返回具有类
  • 从数据库检查数据的异步解决方案各种循环子句

    我想要做的是异步检查数据库并从中获取结果 在我的应用程序中我试图实现Asynchronously将此步骤解决为 从数据库中检查手机号码JsonArray循环子句的种类 Create JsonArray从结果 打印创建的数组 我学到了足够多的
  • 对于只触及我的工作表的 Google 表格脚本,收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该
  • 在 JavaScript 循环之外声明变量可以提高速度和内存?

    C 也有类似的问题 但我们没有看到 JavaScript 的任何问题 在循环内声明变量是否可以接受 假设循环有 200 次迭代 使用样本 2 相对于样本 1 是否有性能要求 内存和速度 我们使用 jQuery 来循环 它提高了我们将 var
  • 在 Shopify 商店中嵌入 Vue 组件

    在产品页面中 我尝试显示自定义 Vue 组件 为简洁起见 该组件根据给定的产品 ID 显示 Firebase 数据库中的一些信息 我最初尝试将其制作为 Shopify 应用程序 以便我可以访问他们的 API 我实现了 OAuth 并且可以检
  • Javascript Replace() 和 $1 问题

    我正在尝试创建一个脚本来搜索文本中的模式并在它找到的字符串周围包裹一个标签 shop attributes td each function this html function i html return html replace E 0
  • 从 FileReader 设置背景图像样式

    我正在寻找一种解决方案 允许我从文件上传输入中获取文件并通过设置 document body style backgroundImage 来预览它 以下代码用于在 Image 元素中显示预览 function setImage id tar
  • JavaScript 相对路径

    在第一个 html 文件中 我使用了一个变量类别链接 var categoryLinks Career prospects http localhost Landa DirectManagers 511 HelenaChechik Dim0

随机推荐

  • 如何通过点击JButton来添加JPanel?

    我正在尝试创建一个小型 GUI 它有 2 个 JButtons 和 2 个 JPanels 每个 JPanels 上都有一些绘图动画 默认情况下 它必须显示第一个 JPanel 通过单击第二个 JButton 我想看到第二个 JPanel
  • 无法读取未定义的属性“thisCompilation”-react-scripts-ts

    我使用以下说明创建了一个完全空白的新项目 https developer microsoft com en us fabric get started https developer microsoft com en us fabric g
  • 在 Tensorflow 模型中添加低层

    尝试开发一些转移学习算法 我使用一些经过训练的神经网络并添加层 我正在使用 Tensorflow 和 python 在 Tensorflow 中使用现有图似乎很常见 导入图 例如使用元图 然后通过添加节点来设置新的高层 例如 我找到了这段代
  • 意外标记“(”附近出现语法错误

    下面是我的代码 它一直告诉我第 10 行导致了这个 意外标记 附近的语法错误 但我不明白为什么 我正在添加到已经编写的代码中 但它说有的部分错误不是我添加的内容的一部分 所以我对为什么会收到此错误感到非常困惑 此外 我想要一个关于此错误实际
  • 具有 2 个不同 .pem 密钥的 2 个服务器之间的 scp 命令

    我想使用 scp 和 2 个不同的 pem 密钥将文件夹从服务器 A 传输到服务器 B 这是最好的方法吗 它是否真的有效 scp i Documents server1 pem r email protected cdn cgi l ema
  • 在提取/替换操作期间保留对象属性的方法

    最近我在我的R代码中遇到了以下问题 在接受数据框作为参数的函数中 我需要添加 或替换 如果存在 一列 其中包含根据数据框原始列的值计算的数据 我编写了代码 但测试显示数据框提取 替换操作 我用过 结果是对象的特殊 用户定义 属性丢失 在意识
  • 使用 application/x-www-form-urlencoded 的 POST 请求

    后端开发人员在 POST 请求中给出了这些说明 路线 url app name controller action 控制器和操作应该是小写字母 API测试链接 http 请求应使用 POST 方法 参数应通过请求内容正文 FormUrlEn
  • 客户端语言

    我不是网络程序员 所以请原谅我的无知 当谈到服务器端编程时 我们有很多可用的技术 例如 PHP ASP net JSP 等 然而 说到客户端脚本 我只听说过 JavaScript 和 AJAX 也许您还可以包含 Java Applet 因为
  • 使用 PHP 将文件夹重命名为子文件夹

    我正在尝试通过重命名来移动文件夹 test1 和 test2 文件夹均已存在 rename test1 test2 xxx1 xxx2 我得到的错误是 重命名 没有这样的文件或目录 我认为这是因为目录 xxx1 不存在 我怎样才能移动 te
  • 大多数编译器都会优化 MATMUL(TRANSPOSE(A),B) 吗?

    In a Fortran program I need to compute several expressions like M v MT v MT M M MT etc Here M and v are 2D and 1D arrays
  • Scala:==默认等于吗?

    我正在阅读 Scala 编程 它说 您可以重新定义的行为 通过覆盖新类型equals方法 始终从类继承Any 继承的equals除非被覆盖 否则它是对象标识 就像 Java 中的情况一样 所以equals 随之而来的是 默认情况下与eq 但
  • 发布有关 Ektron 问题的最佳在线网站是什么?

    我正在尝试使用 Dotnet 在 Ektron 中做一个新项目 我发现数量相当少 stackoverflow 中发布的问题及其答复 最好的网站是什么 消除我在使用 Ektron 进行开发时的疑虑 谢谢 同意 zkent 但有额外的建议 发布
  • 尝试使用 Fluent NHibernate 调用存储过程时出现命名查询未知错误

    我正在为一个项目设置 NHibernate 并且有一些疑问 由于它们的复杂性 我们将保留为存储过程 我希望能够使用 NHibernate 来调用存储过程 但遇到了一个我无法弄清楚的错误 由于我使用的是 Fluent NHibernate 所
  • 使用WMI远程卸载应用程序

    我正在尝试编写一个迷你 w32 可执行文件来使用 WMI 远程卸载应用程序 我可以使用下面的代码列出所有已安装的应用程序 但我找不到通过 WMI 和 C 远程卸载应用程序的方法 我知道我可以使用 msiexec 作为进程来执行相同的操作 但
  • gradle 在哪里保存依赖项的 jar?

    我想查看添加依赖项时编译的 jars aars 例如 如果我在 Gradle 中添加此依赖项 它会将 jar 放在哪里 dependencies compile com google android gms play services an
  • 在knitr中跨行分割r块标题

    当我在 R 块标头中插入长标题等内容时 如果能够将标头拆分为多行 那就太好了 有什么简单的方法可以做到这一点吗 E g r echo FALSE warning FALSE fig cap Here is my really long ca
  • 关于“ls”,我如何只显示目录(链接目录和隐藏目录除外)

    我遇到一些关于 ls 这个命令的问题 我只想打印没有隐藏或链接的目录 但我用 man ls 查看解释 但没有找到 如果有一面旗帜表明我可以做我想做的事 thanks 下面是我要解决的问题 4 显示可见出口 This is two comma
  • 来自 Jenkins 的参考 Xcode 版本号

    我正在尝试在 Jenkins Build 中获取对 Xcode 项目 CFBundleVersionString 或 CFBundleVersion 的引用 我的目标是能够以这种方式设置内部版本号 CFBundleVersionString
  • Python 中 pickle 的常见用例

    我看过pickle http en wikipedia org wiki Pickle 28Python 29文档 但我不明白 pickle 在哪里有用 pickle 的一些常见用例有哪些 我遇到过的一些用途 1 将程序的状态数据保存到磁盘
  • 如何最大化和最小化div(没有jquery只有javascript)

    你好 我需要仅使用javascript而不是jquery来最大化或最小化我的html页面中的div 我希望能够这样做http jsfiddle net miqdad Qy6Sj 1 http jsfiddle net miqdad Qy6S