como selecionar todas as classes, exceto o elemento clicado em JQuery?


91

Tenho um site desenvolvido em Drupal. Eu uso um módulo chamado collapsiblock (é basicamente um plugin JQuery) para obter o efeito de acordeão. Está funcionando bem para mim (embora esteja em Beta). Mas eu quero modificá-lo para que, quando o usuário clicar em um item do acordeão, os outros itens sejam recolhidos.

Em suas estatísticas atuais, funciona de forma que quando o usuário clicar em um item, ele verificará se o item já está recolhido ou expandido e fará com que o item seja o oposto. Isso significa que se o usuário clicar em um item, ele se expandirá e se ele clicar em outro item, ele também se expandirá, mas não recolherá o item clicado anteriormente.

Você pode ver o código abaixo. Eu sei onde devo adicionar o código para recolher e como recolher e expandir. Minha pergunta é: Como seleciono todos os itens que têm a classe '.collapsiblock', exceto aquele em que o usuário clicou?

Nota: o item que tem a classe '.collapsiblockCollapsed' é recolhido e se esta classe for removida do item, ela será expandida.

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

ATUALIZAR:

O problema foi resolvido adicionando o seguinte código:

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

logo acima da seguinte linha:

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

Respostas:


173

Use o notseletor.

Exemplo:

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

Muito obrigado. Resolvi o problema com base no seu código. Veja a atualização na pergunta para mais detalhes
Hassan Al-Jeshi

Perfeito para fazer caixas de seleção radiofônicas!
Michael Irey

1
Soluções elegantes not(this):)
numediaweb

Baunilha, por favor! : D
xoxn-- 1'w3k4n

1
Não há necessidade de usar .each()- $('.collapsiblock').not(this).slideUp()deve funcionar bem.
thdoan

8

Tente isto, esta é a melhor maneira porque se você usar cada função, ela será carregada e, no futuro, quando você tiver mais de mil div, levará muito tempo para deslizar para cima e para baixo.

Exemplo:

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

2

Você pode acompanhar qual elemento já foi clicado com seu próprio manipulador de cliques jquery e função de dados (...) do jquery. Em seguida, filtre iterando seus itens .collapsiblock com a função jquery filter (...) para incluir os itens que você precisa.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.