Wie wähle ich alle Klassen außer dem angeklickten Element in JQuery aus?

Ich habe eine Website auf Drupal entwickelt. Ich benutze ein Modul namens Collapsiblock (es ist im Grunde ein JQuery-Plugin), um einen akkordeonartigen Effekt zu erzielen. Es funktioniert gut mit mir (obwohl es in der Beta ist). Aber ich möchte es so ändern, dass, wenn der Benutzer auf ein Element des Akkordeons klickt, die anderen Elemente zusammenfallen.

In den aktuellen Statistiken funktioniert es so, dass beim Klicken des Benutzers auf ein Element überprüft wird, ob das Element bereits reduziert oder erweitert wurde, und das Element umgekehrt wird. Das heißt, wenn der Benutzer auf ein Element klickt, wird es erweitert, und wenn er auf ein anderes Element klickt, wird es ebenfalls erweitert, das zuvor angeklickte Element wird jedoch nicht reduziert.

Sie können den Code unten sehen. Ich weiß, wo ich den Code zum Reduzieren hinzufügen und wie ich ihn reduzieren und erweitern soll. Meine Frage lautet: Wie wähle ich alle Elemente mit der Klasse '.collapsiblock' aus, mit Ausnahme derjenigen, auf die der Benutzer geklickt hat?

Hinweis: Das Element mit der Klasse '.collapsiblockCollapsed' wird reduziert. Wenn diese Klasse aus dem Element entfernt wird, wird es erweitert.

// $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) : {};
};

AKTUALISIEREN:

Das Problem wurde durch Hinzufügen des folgenden Codes gelöst:

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

direkt über der folgenden Zeile:

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

Verwenden Sie den notSelektor.

Beispiel:

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

Versuchen Sie dies. Dies ist ein besserer Weg, denn wenn Sie jede Funktion verwenden, wird sie geladen. In Zukunft wird es lange dauern, bis Sie nach oben und unten rutschen, wenn Sie mehr als tausend Div haben.

Beispiel:

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

Sie können mit Ihrem eigenen jquery click handler und der Datenfunktion (...) von jquery verfolgen, auf welches Element bereits geklickt wurde. Filtern Sie anschließend die Iteration Ihrer .collapsiblock-Elemente mit der Filterfunktion (...) von jquery, um die benötigten Elemente einzuschließen.