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

how to select all class except the clicked element in JQuery?

提问by Hassan Al-Jeshi

I have a website developed on Drupal. I use a module called collapsiblock (it is basicly a JQuery plugin) to achieve accordion like effect. It is working fine with me (although it is in Beta). But I want to modify it so that when the user clicks on one item of the accordion the other items will collapsed.

我有一个在 Drupal 上开发的网站。我使用一个名为 collapsiblock 的模块（它基本上是一个 JQuery 插件）来实现类似手风琴的效果。它对我来说很好用（虽然它是 Beta 版）。但我想修改它，以便当用户单击手风琴的一个项目时，其他项目将折叠。

In its current stats, it is working in a way that when the user click on one item, it will check if the item is already collapsed or expanded and it will make the item the opposite. That means if the user clicks on one item it will expand and if he/she clicks on another item it will also expand, but it will not collapse the previously clicked item.

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

You can see the code below. I know where should I add the code to collapse and how to collapse and expand. My question is: How do I select all the items that have the class '.collapsiblock' except the one that the user has clicked??

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

Note: the item that has the class '.collapsiblockCollapsed' get collapsed and if this class is removed from the item it get expanded.

注意：具有“.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:

更新：

Problem has been solved by adding the following code:

问题已通过添加以下代码解决：

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

just above the following line:

就在以下行上方：

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

回答by Kristoffer Sall-Storgaard

Use the notselector.

使用not选择器。

Example:

例子：

$('.collapsiblock').click(function(){
     $('.collapsiblock').not(this).each(function(){
         $(this).slideUp();
     });
     $(this).slideDown();
})

回答by Bhavik Hirani

Try this,This is a better way because if you use each function it will load and in the future when you have more than a thousand div it will take a long time to slide up and slide down.

试试这个，这是一个更好的方法，因为如果你使用每个函数它都会加载，将来当你有超过一千个 div 时，它需要很长时间才能向上滑动和向下滑动。

Example:

例子：

$('.collapsiblock').click(function(){
   $('.collapsiblock').not(this).slideUp();
   $(this).slideDown();
});

回答by Adrian Grigore

You could keep track of which element has already been clicked with your own jquery click handler and jquery's data(...) function. Then filter iterating your .collapsiblock items with jquery's filter (...) function to include the items you need.

您可以使用自己的 jquery 单击处理程序和 jquery 的 data(...) 函数跟踪已单击哪个元素。然后使用 jquery 的 filter (...) 函数过滤迭代您的 .collapsiblock 项目以包含您需要的项目。