开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

打开当前div时关闭其他打开的div (jQuery)

在前端开发中，可以使用jQuery来实现打开当前div时关闭其他打开的div的功能。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>打开当前div时关闭其他打开的div</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .accordion {
      background-color: #f9f9f9;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
    }

    .active, .accordion:hover {
      background-color: #ccc;
    }

    .panel {
      padding: 0 18px;
      display: none;
      background-color: white;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <h2>打开当前div时关闭其他打开的div</h2>

  <button class="accordion">Section 1</button>
  <div class="panel">
    <p>内容1</p>
  </div>

  <button class="accordion">Section 2</button>
  <div class="panel">
    <p>内容2</p>
  </div>

  <button class="accordion">Section 3</button>
  <div class="panel">
    <p>内容3</p>
  </div>

  <script>
    $(document).ready(function() {
      $('.accordion').click(function() {
        $(this).toggleClass('active');
        $(this).next('.panel').slideToggle();

        // 关闭其他打开的div
        $('.accordion').not(this).removeClass('active');
        $('.panel').not($(this).next('.panel')).slideUp();
      });
    });
  </script>
</body>
</html>

在上述代码中，我们使用了jQuery的click事件来监听点击事件。当点击某个accordion按钮时，我们首先切换该按钮的active类，然后使用slideToggle方法来切换该按钮对应的panel的显示和隐藏。

为了实现关闭其他打开的div的功能，我们使用了.not()方法来排除当前点击的按钮和对应的panel，然后分别移除其他按钮的active类，并使用slideUp方法来隐藏其他panel。

这样，当我们点击某个按钮时，该按钮对应的panel会展开或收起，同时其他已展开的panel会被关闭。

这个功能在一些常见的折叠面板、手风琴菜单等场景中经常使用。腾讯云提供了丰富的云计算产品，例如云服务器、云数据库、云存储等，可以根据具体需求选择适合的产品。具体产品介绍和相关链接可以参考腾讯云官方网站：https://cloud.tencent.com/

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

有帮助

没帮助

相关·内容

页面打开时div从右侧进入原

href="css/bootstrap-table.css"> div...transition:all 0.8s;color:#fff;} .in{transform:translateX(0)} this is content function addclass(){ document.querySelector("div").classList.add...("in") } 页面未加载时，用transform:translateX(100%);把div定位到右边隐藏，当页面加载的时候，增加in class

1.1K2 0

jquery点击删除按钮,删除当前的div

现在有多行div，共用一个删除事件，点击删除的时候，会把页面所有的div全都删掉了，但是我只需要点击哪一行div里面的删除按钮，就删除哪一行，其实很简单，只需要写一个this事件即可。 ?...cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> // 删除按钮事件 $(".editdelete...body> 原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚

5.2K3 0

#利用DialogResult属性实现主程序的打开当前窗口的关闭

利用DialogResult属性实现主程序的打开当前窗口的关闭首先介绍一下非模式化窗体show（）和模式化窗体showdialog（）的概念：两种方法都能打开显示窗体， 1.非模式化窗体show...建立新窗口FrmMain后在关闭本窗口前不能对原窗口frm进行任何操作，除非FrmMain窗口被关闭。...EventArgs e) { this.DialogResult = DialogResult.OK; this.Close(); //关闭当前窗口...) { Application.Run(new FrmMain()); } 分析：点击button按钮后，当前模式窗体的...关闭窗口（因为是showdialog，所以需要关闭当前窗口才能显示FrmMain窗口），然后执行if语句，运行FrmMain窗口。

1.2K2 0

【记录】使用python图形库打开新窗口时候关闭之前的窗口，运行结束后关闭当前窗口和程序

代码图片展示代码展示 import subprocess import sys # 导入sys模块 def open_buy_quantity(): # 运行购买数量.py文件 # 关闭当前窗口...简单讲解代码片段展示了如何使用 Python 的 Tkinter 库和 subprocess 模块来实现在 tkinter 窗口中打开另一个 Python 脚本的过程，并在脚本运行结束后关闭当前窗口和程序...在你的代码中，你使用了 Tkinter 创建了一个名为 window 的主窗口，并在 open_buy_quantity 函数中调用了 window.destroy() 方法来关闭当前窗口。...结语总体来说，代码展示了如何结合使用 Tkinter 和 subprocess 来实现 GUI 程序中打开外部脚本的功能，并在完成任务后退出程序。...这种方法可以在需要在 GUI 应用中执行外部任务时非常有用，例如执行脚本、运行命令等。

1651 0

Excel打开文档时提示“操作系统当前的配置不能运行此应用程序”

目前遇到的情况：前几天开通Office开发者账号，于是在Office 官网下载Office全家桶安装想打开Excel出现"操作系统当前的配置不能运行此应用程序。"...于是按照往常一样百度查找问题发现百度的答案真**（爆粗口），一个答案全部抄袭图片都是一样的。意外发现一个教程完美的解决了，方案如下 [zbf1n05eqm.png?...q-header-list=&q-url-param-list=&q-signature=be3808319a6b1834c66bc4a5565afd4597340c70] 解决方案一、先找一下自己的电脑中有没有...EXCEL词典（xllex.dll）这个动态库： 1.打开打Excel的安装目录位置搜索xllex.dll这个文件（如果没有我把文件放最后了，自行下载 image.png 2.然后把这个文件给复制，粘贴到...image.png 3.这样就正常运行了，没有文件的打开点击下载 xllex.dll，在按照上面的步骤

4K5 1

ASP.NET MVC5+EF6+EasyUI 后台管理系统（2）-easyui构建前端页面框架

开始搭建打开我们熟悉的VS创建一个空解决方案。...id="tab_menu-openFrame"> 在新的窗体打开 ...关闭所有关闭其他标签页 <div class="menu-sep...close', t); } }); return false; }); //关闭当前左侧的...然后，当你做好 // 生产准备时，请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。

2.3K6 0

2. 创建菜单界面

--引入jQuery的js--> </script...由于打包时按照文件名字典序排列的，可以保证在打包的时 zbase.js 在最后打包。...$single_mod.click(function(){ //切换页面的逻辑 outer.hide(); //关闭当前界面 outer.root.playground.show...$playground = $(`游戏界面`); this.hide(); //默认先关闭 this.root....首先下载一些静态资源，如背景图片等： wget --output-document=自定义图片名称图片地址进入 /game/static/css/，打开 game.css： /*主菜单界面创建时的css

1.5K4 0

Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

基于Bootstrap和JQuery实现动态打开和关闭tab页 by:授客 QQ：1033553122 1....测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-dist win7 2...."#tab-a-" + options.menuID).click(); // 选中打开的tab currentIframID= 'iframe' + options.menuID; } }.../*** * 判断tab页是否已经打开 * @paramtabName当前tab的名称 * @returns {boolean} */ function isTabExists(menuID)...var li_active= $("#"+ tabFatherElementID+ " >li.active"); if (li_active.attr('id') == li_id) { // 如果关闭的是当前处于选中状态的

7.8K2 0

jQueryMobile快速入门

.min.js"> 结构　　一个jQuery Mobile页面时你需要创建三块基本内容（头，正文，尾），要在html文档中的 head 标签内填写： <meta name="viewport...现在你可以使用前一节中<em>的</em>模板来创建一个包含三个跳转到<em>其他</em>页面的链接<em>的</em>导航页面：汇智网　　要访问面板，需要创建一个指向面板<em>的</em>链接，点击该链接即可<em>打开</em>面板...： <em>打开</em>面板　　默认情况下，面板会显示在屏幕<em>的</em>左侧。...--推动显示--> 　　可以使用按钮来<em>关闭</em>面板：仅需要在面板<em>的</em><em>div</em>中添加 data-rel="close" 属性。

3.7K2 0

Jump Start Bootstrap 第4章

在这里，请求是打开和关闭下拉菜单。让我展示一个如何使用这些事件的例子。我已经写了下面的JQuery代码片段去监听所有的下拉插件状态，并打印每个事件触发时的状态。 <!...导航条仅由内部链接作为href属性的值组成。当用户开始滚动时，导航栏中的相应链接将按当前显示的部分高亮显示。让我们先建立一个navbar，下面是代码： <!...添加data-dismiss使按钮在单击时关闭模式对话框。对于本体，我们需要一个包含类modal-body的元素。您可以将几乎任何内容放到该元素中。...模式对话框的放置模式对话框必须放在文档的顶层位置，以防止与其他组件发生冲突。【注：顶层是指内第一层】然而，当放置模式句柄时，没有限制。...当设置为“静态”时，当在模态主体外的任何地方点击时，模式对话框不会关闭。 keyboard属性用于启用或禁用键盘的escape键功能，当设置为false时，Esc键不会关闭模式对话框。

28.3K4 0

探索 JQuery EasyUI：构建简单易用的前端页面

就像在世界之窗中插入了一扇神奇的门，我们只需简单地在项目的文件中引入 EasyUI 的 CSS 和 JS 文件，便可打开通往美妙世界的大门。...formatter：设置日期显示的格式。parser：设置日期解析的方式。currentText：设置当前日期按钮的显示文本。closeText：设置关闭按钮的显示文本。...，并设置了禁止手动编辑日期、自定义日期格式、自定义日期解析方式、当前日期按钮文本和关闭按钮文本。...，设置了数据总条数为 1000，每页显示的数据条数为 10，当前页码为 1，每页显示的数据条数选项为 10、20、30。...5.2.3 后端接口在实际应用中，我们通常需要通过后端接口从数据库或其他数据源中获取真实数据，然后将数据传递给前端页面进行图表展示。

5311 0

jquery 使用dialog弹窗显示在整个屏幕上，而不是只遮盖当前的ifream或div，另附dialog中加返回按钮，设置高宽等「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。...小编使用的dialog是如下： var d = top.dialog({ title: '【哈哈】查询结果', url:'${base}/commonDig/appl?...可能不用人用的dialog不同，现实也会有差异，这里仅提供了小编的解决办法。仅供参考。

4.6K2 0

探索 JQuery EasyUI：构建简单易用的前端页面

就像在世界之窗中插入了一扇神奇的门，我们只需简单地在项目的文件中引入 EasyUI 的 CSS 和 JS 文件，便可打开通往美妙世界的大门。...formatter：设置日期显示的格式。 parser：设置日期解析的方式。 currentText：设置当前日期按钮的显示文本。 closeText：设置关闭按钮的显示文本。...，并设置了禁止手动编辑日期、自定义日期格式、自定义日期解析方式、当前日期按钮文本和关闭按钮文本。...，设置了数据总条数为 1000，每页显示的数据条数为 10，当前页码为 1，每页显示的数据条数选项为 10、20、30。...5.2.3 后端接口在实际应用中，我们通常需要通过后端接口从数据库或其他数据源中获取真实数据，然后将数据传递给前端页面进行图表展示。

781 0

jQuery插件jQueryUI

可以根据需求选择所需的组件进行使用。示例代码如下：这是一个对话框示例。...打开对话框$(document).ready(function() { // 初始化对话框 $(...通过设置autoOpen选项为false，使对话框初始时不显示。使用modal选项将对话框设置为模态对话框，即禁止用户操作其他页面元素。在对话框初始化之后，我们通过点击按钮来打开对话框。...通过dialog("open")方法，可以打开对话框。对话框中的按钮通过buttons选项进行定义，并指定点击按钮后的处理逻辑。...除了上述组件和效果外，还有很多其他组件和效果可供选择和使用。可以根据具体需求，在jQuery UI官方文档中查找相关组件的详细文档和示例。

2.6K2 0

视频网站弹幕开发

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。...:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing". fn:在动画完成时执行的函数，每个元素执行一次。...content:要追加到目标中的内容上面是查API拷贝过来的。第一个方法用来打开、关闭弹幕，第二个方法是让弹幕动起来的，第三个方法是添加新的弹幕。...过程： step 1：写一个html页面 step 2：写一个块作为弹幕的开启open step 3：写一个块承载弹幕screen 　　在这个上面有三部分：　　　　关闭close...); 　　为了可以得到随机的颜色，借用了getRandomColor()方法　　代码如下： $(function(){ //打开、关闭弹幕 $

5081 0

jBox使用_jconsole使用教程

– $.jBox.getBox(); 　　　└ 获取最前面打开的窗口jQuery对象。...– $.jBox.getIframe(jBoxId); 　　　└ 获取最前面打开的或指定ID的窗口里的 iframe jQuery对象。...（content为多状态下） – $.jBox.close(token); 　　　└ 关闭最前面打开的窗口，token可以是指定jBox的ID或布尔值，如果是true显示关闭所有已打开的窗口...– $.jBox.closeTip(); 　　　└ 关闭提示（由 $.jBox.tip() 打开的）。...– $.jBox.closeMessager(); 　　　└ 关闭提示（由 $.jBox.messager() 打开的）。

7K1 0

jquery 使用方法

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。...一、选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。　　...5 $('div:gt(2)')//选择所有的div元素，除了前三个 6 $('div:animated')//选择当前处于动画状态的div元素二、改变结果集如果选中多个元素，jQuery...五、元素的操作：移动　　　　如果要移动选中的元素，有两种方法：一种是直接移动该元素，另一种是移动其他元素，使得目标元素达到我们想要的位置。假定我们选中了一个div元素，需要把它移动到p元素后面。...; }//回调函数 8 ); .stop()和.delay()用来停止或延缓特效的执行。 $.fx.off如果设置为true，则关闭所有网页特效。

1.6K1 0

大型项目技术栈第七讲 Chosen的使用

Chosen的使用 Chosen是jquery下的一个下拉框插件。它能美化select选择框使其他变的更好看、更方便,同时它更扩展筛选的功能。它可对列表进行分组，同时也可禁用某些选择项。...console.log(params);//当前被选中的哪个元素的值 console.log($(".my-chosen-select option:selected")) //获取所有被选中元素...Chosen 实例化完成时触发 chosen:maxselected 超过 max_selected_options 设置时触发 chosen:showing_dropdown Chosen 下拉选框打开完成时触发...chosen:hiding_dropdown Chosen 下拉选框关闭完成时触发 chosen:no_results 搜索没有匹配项时触发注意：所有 Chosen 自定义事件都包含 Chosen...，以更新 Chosen 生成的选框 chosen:activate 相当于 HTML focus 事件 chosen:open 激活 Chosen 并显示搜索结果 chosen:close 关闭 Chosen

4.2K4 0

jQuery设计思想

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。...这是它区别于其他Javascript库的根本特点。使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。...'div:visible') //选择可见的div元素　　$('div:gt(2)') // 选择所有的div元素，除了前三个　　$('div:animated') // 选择当前处于动画状态的...除了元素的位置移动之外，jQuery还提供其他几种操作元素的重要方法。...; } //回调函数　　); .stop()和.delay()用来停止或延缓特效的执行。 $.fx.off如果设置为true，则关闭所有网页特效。（完）

2.2K6 0

判断用户是否断网navigator.onLine

-- JQuery CDN --> <script src="https://code.<em>jquery</em>.com/<em>jquery</em>-3.3.1.min.js" integrity...> ?...3）当手动修改电脑 IP 地址，使 ip 异常浏览器无法上网时，点击按钮，navigator.onLine 返回 taue，手机端亲测结果： 1）当关闭 WIFI 与流量时，点击按钮时，navigator.onLine...返回 false 2）当打开 WIFI 或者流量时，点击按钮，navigator.onLine 返回 true 扩展 [HTML5 API中Network Information API]：(https...，他包含了一些当前连接的基本信息，其中connection.type值的就是当前的网络类型。

3.3K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭