开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

创建3个Div，点击后展开并显示内容

。

答案： Div是HTML中的一个标签，用于创建一个容器，可以用来包裹其他HTML元素。在这个问题中，我们需要创建3个Div，并实现点击后展开并显示内容的效果。

首先，我们需要在HTML中创建3个Div元素，并为它们添加相应的样式和事件监听器。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
  .div-container {
    width: 200px;
    height: 30px;
    background-color: #f1f1f1;
    margin-bottom: 10px;
    cursor: pointer;
  }
  
  .div-content {
    display: none;
    padding: 10px;
    background-color: #ffffff;
  }
</style>
</head>
<body>
  <div class="div-container" onclick="toggleContent(1)">Div 1</div>
  <div class="div-content" id="content1">Content 1</div>
  
  <div class="div-container" onclick="toggleContent(2)">Div 2</div>
  <div class="div-content" id="content2">Content 2</div>
  
  <div class="div-container" onclick="toggleContent(3)">Div 3</div>
  <div class="div-content" id="content3">Content 3</div>

<script>
  function toggleContent(divNumber) {
    var content = document.getElementById("content" + divNumber);
    if (content.style.display === "none") {
      content.style.display = "block";
    } else {
      content.style.display = "none";
    }
  }
</script>
</body>
</html>

在上述代码中，我们创建了3个Div容器，分别是Div 1、Div 2和Div 3。每个Div容器都有一个相应的内容区域，初始状态下内容区域是隐藏的（display: none）。当点击对应的Div容器时，通过toggleContent函数来切换内容区域的显示状态。

这个实现方式是通过JavaScript来操作DOM元素的样式来实现的。点击Div容器时，会调用toggleContent函数，并传入对应的Div编号。toggleContent函数根据内容区域的当前显示状态来切换其显示或隐藏。

这样，当点击Div容器时，对应的内容区域就会展开或收起，实现了点击后展开并显示内容的效果。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发：https://cloud.tencent.com/product/mobdev
腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
腾讯云元宇宙：https://cloud.tencent.com/product/tencent-metaverse

相关搜索:img动态创建并附加到div，也是动态创建的，不显示 jquery accordion应在单击header div后显示内容 jQuery点击时动态隐藏/显示div内容 js创建div并显示出来 Python创建表格并另存为CSV并显示第一行内容 React Native -显示模式，点击后可显示更多内容单击时展开一个div并收缩其他div，再次单击后恢复到正常状态如何在React，Js中点击按钮后创建新的div？如何在每次点击后清除按钮点击内容并生成新的内容如何让在js中创建的div在点击动态创建的td后填满屏幕？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jQueryMobile快速入门

jQuery Mobile是jQuery 在手机上和平板设备上的版本。它不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。

02

2019-08-07 新手帮助的实现

新手帮助.gif 安装driver.js cnpm install driver.js -s 引入 import Driver from "driver.js" // 引入插件 import "driver.js/dist/driver.min.css" // 引入插件 import steps from "./dd" // 引入步骤创建一个js文件，用于存放 step的提示, 内容如下 // 通过绑定元素类名，id名的形式来执行步骤，注意第一个对象要写两次。 con

04

利用HTML5，无JS实现各种交互效果

标签在Chrome，Firefox等浏览器下默认是有展开收起行为的，例如下面HTML：

02

JavaScript 展开全文和收起全文

我们在浏览文章列表页的时候，往往只会看到一部分的摘要，在摘要下面会有一个展开全文的按钮，点开后就能看到完整内容，而原来的展开全文按钮此时变成了收齐全文的按钮，同样的，点击该按钮之后，又会回到之前显示部分摘要的状态

04

为wordpress文章添加额外功能[移植自DUX主题]

.xControl { font-size: 15px; font-weight: bold; padding: 5px 0; box-shadow:0 0 20px #d0d0d0;/* 阴影 */ background-color: #FFFFFF;/* 背景颜色 */ border-bottom: 2px solid #e74c3c;/* 边 */ transition: all 0.1s linear; text-align: center; border-radius: 0 0 5% 5%; border-radius:4px; } .xControl a{ text-decoration: none; display: block; }

01

webpack+vue项目实战（二，开发管理系统主页面）

上篇文章(webpack+vue项目实战（一,搭建运行环境和相关配置）)搭建了好了基本的一个项目目录，安好好了一些要用到的依赖，以及把项目跑了起来。接下来，我们就进行第二步的操作，第二步就是做好一个开发系统的主页面，这个页面主要也就是一个侧边栏，通过侧边栏的各个选项来进行操作（切换各个组件）。比如回款管理，订单管理，物流管理等等的操作。

01

用Vue.js递归组件构建一个可折叠的树形菜单

递归组件常用于在blog上显示注释、嵌套的菜单，或者基本上是父和子相同的类型，尽管具体内容不同。例如:

03

jQuery Cheat—Sheet（jQuery学习笔记）

jQuery Cheat—Sheet（jQuery学习笔记） Web前端学习笔记之——jQuery学习笔记 ---- 什么是jQuery？ jQuery是一种JavaScript库，实现了常见任务的自动化和复杂任务简单化。 jQuery库为Web脚本编程提供了通用的抽象层，使之适合任何脚本编程情景。 jQuery能满足以下需求：取得文档中的元素、修改页面外观、改变文档内容、响应用户的交互操作、为页面添加动态效果、不刷新加载、简化常见的JavaScript任务。 ---- jQuery版本？

03

jQuery EasyUI 详解

easyui 为创建现代化，互动，JavaScript 应用程序，提供必要的功能。

01

jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)

本文主要介绍了EasyUI中的一些组件和模块，包括表格、日历、表单、对话框、颜色选择器等。通过这些组件和模块，可以快速搭建出各种类型的应用程序。同时，还介绍了一些EasyUI中的实用工具，包括easyui-lang-zh、easyui-validate、easyui-component-extend等。这些工具可以帮助开发者更加灵活地开发和管理系统。

纯CSS实现点击展开全文功能

看标题大家不难猜到我今天要实现的功能，正如你打开我的博客文章(阅读原文链接可以看效果），在正文下面看到的按钮，点击展开全文。本文简要的为大家介绍一下，方便理解掌握。

01

jquery特殊效果 - fadeIn\fadeOut\hide\show\slide

那么下一步写click监听点击按钮，然后触发div使用fadeOut()方法，使得已存在的div消失，如下：

02

10个好用的 HTML5 特性

在本文中，我列出了十个我过去没用过的HTML5功能，但现在发现它们很有用，废话不多说，让我们开始吧。

01

[javascript] 实现展开全文和收起全文效果

在展示大量文本的时候,很多网站会在页面上出现一个展开全文的文字按钮 , 点击这个按钮才会展开全部内容 .

04

前端入门24-响应式布局（BootStrap）声明正文-响应式布局（BootStrap）

BootStrap 目前已经出了 4 个版本，每个版本都有对应的官网教程，先来看看不同版本里的宣传语：

02

Django接口新增页面编写_2（十五）

做一个好看的页面真的是一件困难的事情，所以还是遵循复制后修改的原则，首先是借鉴httpbin页面的方式进行块状展开。

05

4 个 useState Hook 示例

到 React 16.8 目前为止，如果编写函数组件，然后遇到需要添加状态的情况，咱们就必须将组件转换为类组件。

02

新手学EasyUI（八）----SubGrid三级嵌套

本来是想用tree来实现的，但是无奈时间紧张，能力有限，暂时没有方法来实现这样的树，于是就换了一种方式。在EasyUi中有一种表格可以满足上面的样式—–SubGrid表格

03

WordPress免插件仅代码实现文章归档模板 II

不多说了，本站目前使用的效果，可以到我的存档页一览，该方法来自zww，感谢原作者，在这之前，建议你： 1、你的博客存档页面地址后面的应该为/articles,而不是常见的/archives 。在英文中，article表示“文章”，而archive意为“档案”，使用archive貌似不那么规范；2、你的博客存档页面应该禁止搜索引擎访问，因为这会造成内容重复（在你启用站点地图插件的情况下）。折腾功能：代码实现WordPress归档页面模板[WP原生函数篇] 原创作者：zwwooooo 特点： 1. 按

08

10个好用的 HTML5 特性

在本文中，我列出了十个我过去没用过的HTML5功能，但现在发现它们很有用，废话不多说，让我们开始吧。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭