¿Cómo seleccionar todas las clases excepto el elemento en el que se hizo clic en JQuery?


91

Tengo un sitio web desarrollado en Drupal. Utilizo un módulo llamado collapsiblock (básicamente es un complemento de JQuery) para lograr un efecto de acordeón. Me está funcionando bien (aunque está en Beta). Pero quiero modificarlo para que cuando el usuario haga clic en un elemento del acordeón, los otros elementos colapsen.

En sus estadísticas actuales, está funcionando de tal manera que cuando el usuario hace clic en un elemento, verificará si el elemento ya está contraído o expandido y hará que el elemento sea lo contrario. Eso significa que si el usuario hace clic en un elemento, se expandirá y si hace clic en otro elemento, también se expandirá, pero no contraerá el elemento en el que se hizo clic anteriormente.

Puedes ver el código a continuación. Sé dónde debo agregar el código para contraer y cómo contraer y expandir. Mi pregunta es: ¿Cómo selecciono todos los elementos que tienen la clase '.collapsiblock' excepto el que el usuario ha hecho clic?

Nota: el elemento que tiene la clase '.collapsiblockCollapsed' se contrae y si esta clase se elimina del elemento, se expande.

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

ACTUALIZAR:

El problema se ha resuelto agregando el siguiente código:

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

justo encima de la siguiente línea:

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

Respuestas:


173

Usa el notselector.

Ejemplo:

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

Muchas gracias. He resuelto el problema basándome en tu código. Mire la actualización en la pregunta para obtener más detalles
Hassan Al-Jeshi

¡Perfecto para hacer casillas de verificación de radio-ish!
Michael Irey

1
Soluciones elegantes not(this):)
numediaweb

¡Vainilla por favor! : D
xoxn-- 1'w3k4n

1
No es necesario usarlo .each(), $('.collapsiblock').not(this).slideUp()debería funcionar bien.
thdoan

8

Pruebe esto, esta es una mejor manera porque si usa cada función se cargará y en el futuro, cuando tenga más de mil div, tomará mucho tiempo deslizarse hacia arriba y hacia abajo.

Ejemplo:

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

2

Puede realizar un seguimiento de qué elemento ya se ha hecho clic con su propio controlador de clics de jquery y la función de datos de jquery (...). Luego filtre iterando sus elementos .collapsiblock con la función filter (...) de jquery para incluir los elementos que necesita.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.