як вибрати весь клас, крім клацаного елемента в JQuery?

У мене є веб-сайт, розроблений на 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) : {};
};

ОНОВЛЕННЯ:

Проблему було вирішено додаванням такого коду:

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

трохи вище наступного рядка:

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

Використовуйте notселектор.

Приклад:

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

Спробуйте це, це кращий спосіб, тому що якщо ви використовуєте кожну функцію, вона завантажиться, і в майбутньому, коли у вас буде більше тисячі div, це займе багато часу, щоб ковзати вгору та ковзати вниз.

Приклад:

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

Ви можете відстежувати, до якого елемента вже клацнули, за допомогою власного обробника клацання jquery та функції даних jquery (...). Потім відфільтруйте ітерацію елементів .collapsiblock за допомогою функції фільтра jquery (...), щоб включити необхідні вам елементи.