wake-up-neo.net

Wie wählt man 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 akkordeonähnlichen Effekt zu erzielen. Es funktioniert gut mit mir (obwohl es in der Beta ist). Aber ich möchte es so ändern, dass die anderen Gegenstände zusammenfallen, wenn der Benutzer auf einen Gegenstand des Akkordeons klickt.

In der aktuellen Statistik funktioniert es so, dass der Benutzer beim Klicken auf einen Artikel überprüft, ob der Artikel bereits reduziert oder erweitert ist, und das Gegenteil bewirkt. 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 er reduziert und erweitert werden muss. Meine Frage lautet: Wie wähle ich alle Elemente mit der Klasse ".collapsiblock" aus, außer dem, auf den der Benutzer geklickt hat?

Hinweis: Das Element mit der Klasse ".collapsiblockCollapsed" wird reduziert. Wenn diese Klasse aus dem Element entfernt wird, wird sie 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) : {};
};

PDATE:

Das Problem wurde durch Hinzufügen des folgenden Codes behoben:

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

knapp über der folgenden Zeile:

$(this).removeClass('collapsiblockCollapsed');
80
Hassan Al-Jeshi

Verwenden Sie den Selektor not .

Beispiel:

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

Versuche dies,

Beispiel:

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

Dies ist der bessere Weg, denn wenn Sie jede Funktion verwenden, damit sie geladen wird, und in Zukunft mehr als tausend Div haben, wird es lange dauern, bis SlideUp oder SlideDown ausgeführt werden.

7
Bhavik Hirani

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

2
Adrian Grigore