come selezionare tutta la class tranne l’elemento cliccato in JQuery?

Ho un sito web sviluppato su Drupal. Io uso un modulo chiamato collapsiblock (è fondamentalmente un plugin JQuery) per ottenere un effetto simile alla fisarmonica. Funziona bene con me (anche se è in beta). Ma voglio modificarlo in modo che quando l’utente fa clic su un elemento della fisarmonica, gli altri elementi vengano compressi.

Nelle sue statistiche correnti, sta funzionando in modo tale che quando l’utente fa clic su un elemento, controllerà se l’object è già collassato o espanso e renderà l’object opposto. Ciò significa che se l’utente fa clic su un elemento si espande e se fa clic su un altro elemento si espanderà anche, ma non comprimerà l’elemento selezionato in precedenza.

Puoi vedere il codice qui sotto. So dove dovrei aggiungere il codice per comprimere e come comprimere ed espandere. La mia domanda è: come faccio a selezionare tutti gli elementi che hanno la class ‘.collapsiblock’ tranne quella che l’utente ha cliccato ??

Nota: l’elemento con la class ‘.collapsiblockCollapsed’ viene compresso e se questa class viene rimossa dall’elemento viene espansa.

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

AGGIORNARE:

Il problema è stato risolto aggiungendo il seguente codice:

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

appena sopra la seguente riga:

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

Usa il not selettore.

Esempio:

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

Prova questo,

Esempio:

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

Questo è il modo migliore perché se si utilizza ciascuna funzione in modo che verrà caricato e in futuro si dispone di più di mille div così ci vorrà molto tempo per SlideUp o SlideDown.

È ansible tenere traccia di quale elemento è già stato fatto clic con il proprio gestore di clic jquery e la funzione di dati di jquery (…). Quindi filtra le voci di .collapsiblock con la funzione filtro di jquery (…) per includere gli elementi necessari.