如何在JQuery中选择除单击元素之外的所有类?

2024-04-08

我有一个在 Drupal 上开发的网站。我使用一个名为 collapsiblock 的模块(它基本上是一个 JQuery 插件)来实现类似手风琴的效果。它对我来说工作得很好(尽管它还处于测试阶段)。但我想修改它,以便当用户单击手风琴的一项时,其他项目将折叠。

在其当前统计数据中,它的工作方式是,当用户单击一个项目时,它将检查该项目是否已经折叠或展开,并且将使该项目相反。这意味着如果用户单击一个项目,它将展开,如果他/她单击另一项目,它也会展开,但不会折叠先前单击的项目。

您可以看到下面的代码。我知道应该在哪里添加折叠代码以及如何折叠和展开。我的问题是:如何选择除用户单击的项目之外的所有具有“.collapsiblock”类的项目?

注意:具有“.collapsiblockCollapsed”类的项目会折叠,如果从项目中删除此类,则会展开。

// $Id: collapsiblock.js,v 1.6 2010/08/18 19:17:37 gagarine Exp $

Drupal.Collapsiblock = Drupal.Collapsiblock || {};

Drupal.behaviors.collapsiblock = function (context) {
  var cookieData = Drupal.Collapsiblock.getCookieData();
  var slidetype = Drupal.settings.collapsiblock.slide_type;
  var defaultState = Drupal.settings.collapsiblock.default_state;
  var slidespeed = parseInt(Drupal.settings.collapsiblock.slide_speed);
  $('div.block:not(.collapsiblock-processed)', context).addClass('collapsiblock-processed').each(function () {
    var id = this.id;
    var titleElt = $(':header:first', this).not($('.content :header',this));
    if (titleElt.size()) {
      titleElt = titleElt[0];
      // Status values: 1 = not collapsible, 2 = collapsible and expanded, 3 = collapsible and collapsed, 4 = always collapsed
      var stat = Drupal.settings.collapsiblock.blocks[this.id] ? Drupal.settings.collapsiblock.blocks[this.id] : defaultState;
      if (stat == 1) {
        return;
      }

      titleElt.target = $(this).find('div.content');
      $(titleElt)
        .addClass('collapsiblock')
        .click(function () {
          var st = Drupal.Collapsiblock.getCookieData();
          if ($(this).is('.collapsiblockCollapsed')) {
            $(this).removeClass('collapsiblockCollapsed');
            if (slidetype == 1) {
              $(this.target).slideDown(slidespeed);
            }
            else {
              $(this.target).animate({height:'show', opacity:'show'}, slidespeed);
            }

            // Don't save cookie data if the block is always collapsed.
            if (stat != 4) {
              st[id] = 1;
            }
          } 
          else {
            $(this).addClass('collapsiblockCollapsed');
            if (slidetype == 1) {
              $(this.target).slideUp(slidespeed);
            }
            else {
              $(this.target).animate({height:'hide', opacity:'hide'}, slidespeed);
            }

            // Don't save cookie data if the block is always collapsed.
            if (stat != 4) {
              st[id] = 0;
            }
          }
          // Stringify the object in JSON format for saving in the cookie.
          var cookieString = '{ ';
          var cookieParts = [];
          $.each(st, function (id, setting) {
            cookieParts[cookieParts.length] = ' "' + id + '": ' + setting;
          });
          cookieString += cookieParts.join(', ') + ' }';
          $.cookie('collapsiblock', cookieString, {path: Drupal.settings.basePath});
        });
      // Leave active blocks uncollapsed. If the block is expanded, do nothing.
      if (stat ==  4 || (cookieData[id] == 0 || (stat == 3 && cookieData[id] == undefined)) && !$(this).find('a.active').size()) {
        $(titleElt).addClass('collapsiblockCollapsed');
        $(titleElt.target).hide();
      }
    }
  });
};

Drupal.Collapsiblock.getCookieData = function () {
  var cookieString = $.cookie('collapsiblock');
  return cookieString ? Drupal.parseJson(cookieString) : {};
};

UPDATE:

通过添加以下代码解决了问题:

$('.collapsiblock').not(this).each(function(){
                $(this).addClass('collapsiblockCollapsed');
                $(this.target).animate({height:'hide', opacity:'hide'}, slidespeed);
             });

就在下面一行的上面:

$(this).removeClass('collapsiblockCollapsed');

Use the not http://api.jquery.com/not/选择器。

Example:

$('.collapsiblock').click(function(){
     $('.collapsiblock').not(this).each(function(){
         $(this).slideUp();
     });
     $(this).slideDown();
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在JQuery中选择除单击元素之外的所有类? 的相关文章

  • 使用 Angular 指令禁用文本选择

    我正在学习 JavaScript 和 AngularJS 我想使用 Angular Directive 禁用文本选择 我有该函数的 JavaScript 代码 function clearSelection if document sele
  • 在版本 4.4.6 中禁用 ckeditor 上下文菜单

    我在 Rails4 项目中使用 ckeditor 我尝试了 ckeditor gem 和 ckeditor rails gem 来提供 ckeditor 库 这里有多个帖子 人们希望删除 ckeditor 上下文菜单 以便可以显示本机浏览器
  • 如何使用有角度的材料创建卡片网格?

    我正在尝试使用 ng repeat 创建每行三张卡片的网格 我有一个普通的 javascript 对象数组附加到范围 下面的代码将为每张卡创建一个新行 div div
  • 通过 JavaScript 获取表单名称

    我有一个简单的问题 但我在网上找不到好的解决方案 我有这个 HTML 代码
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第
  • nodejs (libuv) 事件循环是否在一个阶段(队列)中执行所有回调,然后再进入下一阶段或以循环方式运行?

    我正在研究 Node js 中 libuv 提供的事件循环 我遇到了关注 Deepal Jayasekara 的博客 https blog insiderattack net event loop and the big picture n
  • 从 HTTP 登录到 HTTPS

    我的网站默认使用 HTTP 我确实有一个启用 HTTPS 的证书 但只有其上的某些区域强制建立安全连接 登录是通过 Ajax 处理的 我想开始使用 SSL 即使请求来自 HTTP 我尝试强制请求的地址具有 HTTPS 并且它完美地回复 然而
  • IntersectionObserver是否支持水平滚动观察?

    我制作了几个垂直滚动 IntersectionObserver 模块 但我对水平滚动感兴趣 根将是 div 观察目标将是 img 我想观察当 img 放大但 div 保持视口宽度时的变化 我什至不确定移动 Safari 是否会将缩放后的图片
  • JavaScript 验证和 PHP 验证?

    我正在使用 jquery 验证插件来验证空表单 我还应该在 PHP 中检查一下以确保 100 正确吗 或者用 javascript 验证就可以了 谢谢 您应该始终在服务器上进行验证 如果用户以某种方式不使用 Javascript 提交表单
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • JavaScript 中的 Promise 有什么意义?

    一个承诺是一个 可能现在可用 或将来可用 或永远不可用的值 来源 MDN 假设我有一个想要处理图片的应用程序 图片已加载 例如在算法在后台使用它之后 或某种其他类型的延迟 现在我想检查一下图片是否可以在future 通过使用承诺 而不是回调
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • JavaScript RegEx:不同的结果:使用字符串和使用正则表达式“文字”构建模式?

    使用 RegExp 文字与字符串之间有什么区别吗 http jsfiddle net yMMrk http jsfiddle net yMMrk String prototype lastIndexOf function pattern p
  • 如何在另一个自定义 Hook 中使用返回值的自定义 Hook?

    我正在使用 React native 其中有一个名为的自定义 HookuseUser使用以下方法从 AWS Amplify 获取用户信息Auth getUserInfro方法 然后获取返回对象的一部分并用它设置一个状态变量 我还有另一个名为
  • 编辑第一个选项名称

    我有以下我无法访问的代码 我想要做的是将一些文本添加到现在为空的第一个选项中 诸如 选择地址 之类的文本
  • LeafleteachLayer函数不会迭代所有Layer

    使用 GeoJSON 数据数组创建一些标记 getJSON GetLocationsServlet function data L geoJSON data onEachFeature onEachFeature addTo mymap G
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐

  • 使用 UITableView 登录

    如何像在 Skype 应用程序中一样创建用户名 密码登录 我知道这是一个分组表视图 但我该怎么做呢 我搜索了网站 发现了以下代码 UITableViewCell tableView UITableView tableView cellFor
  • 将 RadioButton IsChecked 绑定到 ListBoxItem IsSelected 和 ListBox IsFocused

    我见过其他与此非常相似的问题 但不知何故我仍然无法让它发挥作用 这是场景 我拥有的我有一个ListBox显示我的视图模型的列表 每个视图模型都有一个子级列表 这些子级显示在另一个嵌套列表框中 我正在使用一个DataTemplate为了达成这
  • 在 React Native 部分列表中过滤数据

    我正在使用 React Native 的SectionList SectionList 的数据看起来像这样 data title Asia data Taj Mahal Great Wall of China Petra title Sou
  • 如何修复 pg_dump 版本不匹配错误?

    当尝试将本地数据获取到 Heroku 时 我遇到两个不同版本的 pg dump 之间的版本不匹配 具体来说 我收到以下消息 pg dump server version 9 2 2 pg dump version 9 1 4 pg dump
  • Firefox:image.onload 中的 canvas.toDataURL 但返回透明图像

    我知道图像必须完整 在画布上使用 toDataURL 函数之前其加载已完成 将代码放在 image onload 函数中可确保这一点 还尝试了 canvas getContext 中的 preserveDrawingBuffer true
  • Angular2 错误处理最佳实践

    我有一个关于 Angular2 错误处理最佳实践的问题 这是我用来捕获错误的代码 Getdata data object let body JSON stringify data let headers new Headers Conten
  • 如何从 Java 程序动态创建新的 .java 文件?

    我想从 Java 程序创建一个 java 当我运行该程序时 将在我的项目中自动创建一个 Java 文件 并在该文件中创建一些运行时 动态 变量 我怎样才能做到这一点 我知道为此我必须使用 Reflection API 例如Class and
  • Qt5.8.0缺少vcruntime140d_app.dll

    我有一个非常简单的 Qt 应用程序 由 main cpp mainwindow cpp mainwindow h 和 mainwindow ui 组成 各内容如下所示 main cpp include mainwindow h includ
  • WordPress jQuery 未捕获类型错误:对象 [object Object] 的属性“$”不是函数

    我正在将 html 文件转换为 WordPress 主题 并使用插件 ZClip 将文本复制到剪贴板 ZClip 插件在我的 html 演示中工作正常 但是当转换为 WordPress 时 我在第 288 行中收到了这个奇怪的语法错误 Un
  • 从 Crystal Report 中的多个表推送数据

    我有一个名为 CR1 的水晶报表 现在我想将多个表中的数据填充到我的水晶报表 CR1 中 我使用的是VS2008 编码语言是ASP net中的C 任何帮助将不胜感激 创建一个存储过程然后将其用作报告的数据源 我会帮你的
  • 无法重现类型擦除示例的结果

    我正在阅读 Java 泛型和集合 第 8 4 节 作者在尝试解释二进制兼容性时定义了以下代码 interface Name extends Comparable public int compareTo Object o class Sim
  • python中列表切片语法的问题

    python 的文档中提到了扩展索引语法 slice start stop step 使用扩展索引语法时也会生成切片对象 例如 a start stop step or a start stop i See itertools islice
  • 在VBA中从SQL Server获取数据

    您好 下面是我的代码 我无法从 SQL 服务器获取数据 它的抛出错误为 Compiler error object required 连接没有问题 连接成功 请更正我的代码 帮我解决这个问题 Private Sub CommandButto
  • 迭代范围的函数式方法(ES6/7)[重复]

    这个问题在这里已经有答案了 以更实用的方式执行以下操作的最佳方法是什么 使用 ES6 ES7 let cols for let i 0 i lt 7 i cols push i i return cols 我尝试过 return 7 map
  • jQuery - 正则表达式选择和removeClass()?

    我收到了几个自动生成的 HTML 文档 长达数千行 我需要清理源代码 大多数情况下需要删除 table col 之类的类名 这是一个两步问题 选择具有 table col 的任何及所有类 其中 是 0 999 之间的整数 从元素中删除匹配的
  • 如何执行 GitHub 上的 hello_world 示例:linuxkit/linuxkit?

    情况与问题 我正在尝试跟随本指南 https medium com notsinge making your own linuxkit with docker for mac 5c1234170fb1关于 如何使用 docker for m
  • C++ boost::graph 从有向图中获取父顶点

    我有一个有向图 通过 boost graph 库中的 adjacency graph 实现 我试图找到某个顶点的父顶点 过去 通过 pygraph 我只是简单地反转了有向图 然后进行了邻居搜索 但似乎使用 boost reverse gra
  • Pandas 忽略 NaN 删除重复项

    在 Pandas df 中 我尝试删除多个列中的重复项 每行有很多数据NaN 这只是一个例子 数据是一个混合包 因此存在许多不同的组合 df drop duplicates IDnum name formNumber 1 NaN AP GR
  • 使用 URL 启动应用程序

    我读过有关 android 中的意图的内容 但这是我的问题 我想通过点击网络浏览器中的链接来启动我的 Android 手机上的应用程序 例子 如果链接是 mycam http camcorder com http camcorder com
  • 如何在JQuery中选择除单击元素之外的所有类?

    我有一个在 Drupal 上开发的网站 我使用一个名为 collapsiblock 的模块 它基本上是一个 JQuery 插件 来实现类似手风琴的效果 它对我来说工作得很好 尽管它还处于测试阶段 但我想修改它 以便当用户单击手风琴的一项时