如何使用Jquery和CSS在同级div上打开div

使用jQuery和CSS可以通过以下步骤在同级div上打开div：

首先，在HTML文件中引入jQuery库和CSS样式文件。可以通过以下代码在<head>标签中引入：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="styles.css">

在HTML文件中创建两个同级的div元素，一个用于触发打开操作，另一个用于显示被打开的div。例如：

<div class="trigger">点击打开</div>
<div class="content">这是要打开的内容</div>

在CSS样式文件中设置被打开的div的初始状态为隐藏，并设置样式。例如：

.content {
  display: none;
  background-color: #f2f2f2;
  padding: 10px;
  border: 1px solid #ccc;
}

使用jQuery来实现点击触发打开操作。在JavaScript代码中，使用.click()方法来监听点击事件，并使用.toggle()方法来切换被打开div的显示和隐藏状态。例如：

$(document).ready(function() {
  $('.trigger').click(function() {
    $('.content').toggle();
  });
});

以上代码将在文档加载完成后，监听.trigger元素的点击事件，并在点击时切换.content元素的显示和隐藏状态。

这样，当点击"点击打开"的div时，被打开的div将显示出来，再次点击则隐藏。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

腾讯云云服务器（CVM）：提供弹性计算能力，可根据业务需求灵活调整配置，支持多种操作系统和应用场景。了解更多信息，请访问：腾讯云云服务器（CVM）
腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，适用于存储和处理各种类型的数据。了解更多信息，请访问：腾讯云对象存储（COS）

相关·内容

JQuery

jQuery 入门指南教程

通过jQuery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jQuery对象（集合对象），不能直接调用dom定义的方法。

jquery获取紧邻的上一个元素

本章节分享一段代码实例，它实现了获取紧邻的上一个同级元素的功能。代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style type="text/css"> #box li { width: 350px; height: 25px; line-height: 25

java使用Jsoup精准爬取<拉勾网>招聘信息

最近探究搜索引擎接触到爬虫，想做点什么有意思的事情，除了前面取了点CSDN的文章外，今天来爬一爬拉勾网的职位信息

jquery高级选择器第一部分

上一篇简单的介绍了jquery的基础选择器,准备把高级选择器部分分为三篇博文介绍!慢工出细活吗,循序渐进相信jq会和css一样顺手,废话不少了接下来开始介绍jq的高级选择器第一部分!

Web前端开发JQuery框架笔记

ID选择器: 通过使用简单的$(#id)标识前缀,实现快速匹配指定ID的元素对象,具体用法如下.

继续死磕前端

今天要说的便是 jquery 这个函数库，毕竟它影响范围之广，不会都不好意说自己会前端？

Vue CLI3.0 中使用jQuery 和 Bootstrap

Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法，但是有时候又要用，所以放上我的引入设置，供大家参考。

CSS元素选择器是怎样运作的？

在前端工程师的日常工作中，使用 CSS 元素选择器是稀松平常的事；无论你是编写一般的 CSS 还是需要经过编译的 SASS，SCSS，LESS等，最终都被编译成一行一行的 CSS 样式属性，最终交给浏览器解析并套用。但是你想过没有这是如何实现的呢？

【JavaWeb】85：jQuery的各种选择器

jQuery语法的简洁之处就是在于此：如果是使用js语法，得到的元素为一个数组，所以要使用for循环依次赋值。

前端之jquery函数库

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

Jsoup选择器语法

jsoup 是一款基于Java 的HTML解析器，可直接解析某个URL地址或HTML文本内容。它提供了一套非常省力的API，可通过DOM，CSS以及类似于jQuery的操作方法来取出和操作数据。 jsoup的强大在于它对文档元素的检索，Select方法将返回一个Elements集合，并提供一组方法来抽取和处理结果，要掌握Jsoup首先要熟悉它的选择器语法。 1、Selector选择器基本语法

JQuery干货篇之选择元素

实例 $("img:odd").css("border","thick double red");选择序号为奇数的img元素 $("img:first").css("border","thick double red") 选择第一个img元素

第六节 - 部门管理模块（开始）

sql建表语句详见：https://www.jianshu.com/p/c88077ed9073 1.新建html模板新建一个空白的txt文档，然后把后缀名改为.html 用任意一个编辑器打开，比

04 . 前端之JQuery

JQuery简介 # 1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 # 2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便

JQuery笔记（三） jquery的用途

近期jquery的学习经历了一些反复：开始时觉得非常强大，比js好用，和css关系密切，一句话：完美。等到把《锋利的JQuery》看完，又有点不知道用它来干嘛了。Ajax功能强大，但我并不需要每个项目都用到；选择器方便、事件处理方便，但我似乎并没有那么多的客户端逻辑需要写。渐渐的，开始怀疑这个东西是不是又是一个看上去很美，实际上用不到的东西。　　不过，最近我算找到了我能够用到JQuery的地方：界面控制。我一直想找到一种比较适合自己的B/S的界面控制方式，要求是简单和灵活。看了很多博客的自定义界面的方

jquery 使用方法

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说，学会jQuery是必要的。因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。

JavaScript 前端笔记总结(精简)

JavaScript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型,属于网络的脚本语言,现在已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果,现在随着node.js引擎的出现,使得JavaScript逐步成为了一种全栈开发语言了.

从编程小白到全栈开发：操控浏览器

一个程序猿和普通电脑用户，当他们浏览到一个效果炫酷的网页的时候，他们的反应是不太相同的：

记一次jsoup的使用

connect(String url) 方法创建一个新的 Connection, 和 get() 取得和解析一个HTML文件。如果从该URL获取HTML时发生错误，便会抛出 IOException，应适当处理。 Connection 接口还提供一个方法链来解决特殊请求，具体如下

前端学习(15)~css3学习(九)：选择器详解

CSS3在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

10个常用的eyoucms易优CMS标签（织梦CMS迁移可用）

最近一个月时间我们不少的朋友都在忙着将织梦CMS迁移到其他免费或者便宜的CMS程序中。其中我们有些朋友会迁移到标签相似的易优CMS，但是标签还是有区别的。我们在迁移程序后需要将原有的模板主题换成新程序的标签，当然对应的模板名称也是需要更换的。

jQuery

ps:.offset()方法允许我们检索一个元素相对于文档（document）的当前位置，和 .position()的差别在于： .position()是相对于相对于父级元素的位移；

JS基础第四课、JQ基础第一课（BOM、JQuery框架）

（1）JavaScript库：一个封装好的特定的集合（方法和函数），该库里封装了很多定义好的函数，支持js的常规操作以及一些扩展

关于react的思考

react作为全球使用人数最多的前端框架，究竟有什么特点呢？本人总结归纳出以下6点：

jQuery(一)

jquery为一种库，属于最基础的一个库，伴随着h5的到来，很多jquery的规则直接融入到了规则本身了，直接使用原生的js也能达到相同的目的。虽然如此，不过依旧要继续。

切换模块下划线跟随效果

经常看到一些网页的导航栏点击切换时，不仅改变当前样式，同时下划线会跟随鼠标点击的标签栏缓慢滑到相应位置，那么这个简单而又好看的效果是如何实现的呢？

软件测试/测试开发|Python selenium CSS定位方法详解

CSS选择器是一种用于选择HTML元素的模式。它允许我们根据元素的标签名、类名、ID、属性等属性进行选择。CSS选择器的语法简单而灵活，是前端开发中常用的定位元素的方式。

day40_jQuery学习笔记_01

day01: jQuery基础 --> 选择器、属性和CSS、文档处理 day02: jQuery高级 --> 筛选、事件、效果(动画)、ajax

jQuery设计思想

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来

jQuery DOM操作

在目标对象前插入同级兄弟元素(不是头部，而是外面，和对象并列同级)，参数和append类似

包学会之浅入浅出Vue.js：开学篇

Vue 是国人写的，技术文档也妥妥的是中文，想到这我就有学习的动力。

090

前端学习笔记之CSS选择器

id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何使用Jquery和CSS在同级div上打开div

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐