come selezionare tutta la classe tranne l'elemento cliccato in JQuery?


91

Ho un sito web sviluppato su Drupal. Uso un modulo chiamato collapsiblock (è fondamentalmente un plugin JQuery) per ottenere un effetto simile a una 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 collasseranno.

Nelle sue statistiche attuali, funziona in modo che quando l'utente fa clic su un elemento, controllerà se l'elemento è già compresso o espanso e renderà l'elemento l'opposto. Ciò significa che se l'utente fa clic su un elemento si espanderà e se fa clic su un altro elemento si espanderà anche, ma non comprimerà l'elemento precedentemente cliccato.

Puoi vedere il codice qui sotto. So dove devo aggiungere il codice per comprimere e come comprimere ed espandere. La mia domanda è: come faccio a selezionare tutti gli elementi che hanno la classe ".collapsiblock" tranne quello su cui l'utente ha fatto clic?

Nota: l'elemento che ha la classe ".collapsiblockCollapsed" viene compresso e se questa classe viene rimossa dall'elemento viene espanso.

// $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 riga seguente:

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

Risposte:


173

Usa il notselettore.

Esempio:

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

Grazie mille. Ho risolto il problema in base al tuo codice. Guarda l'aggiornamento nella domanda per maggiori dettagli
Hassan Al-Jeshi

Perfetto per creare caselle di controllo radio-ish!
Michael Irey

1
Soluzioni eleganti not(this):)
numediaweb

Vaniglia per favore! : D
xoxn-- 1'w3k4n

1
Non c'è bisogno di usare .each()- $('.collapsiblock').not(this).slideUp()dovrebbe funzionare bene.
Thdoan

8

Prova questo, questo è un modo migliore perché se usi ciascuna funzione verrà caricata e in futuro quando avrai più di mille div ci vorrà molto tempo per scorrere su e giù.

Esempio:

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

2

Puoi tenere traccia di quale elemento è già stato cliccato con il tuo gestore di clic jquery e la funzione data (...) di jquery. Quindi filtra l'iterazione degli elementi .collapsiblock con la funzione di filtro (...) di jquery per includere gli elementi di cui hai bisogno.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.