web-dev-qa-db-fra.com

comment sélectionner toutes les classes sauf l'élément cliqué dans JQuery?

J'ai un site Web développé sur Drupal. J'utilise un module appelé collapsiblock (il s'agit essentiellement d'un plugin JQuery) pour obtenir un effet de type accordéon. Cela fonctionne bien avec moi (bien qu'il soit en version bêta). Mais je veux le modifier pour que lorsque l'utilisateur clique sur un élément de l'accordéon, les autres éléments s'effondrent.

Dans ses statistiques actuelles, il fonctionne de manière à ce que lorsque l'utilisateur clique sur un élément, il vérifie si l'élément est déjà réduit ou développé et rend l'élément différent. Cela signifie que si l'utilisateur clique sur un élément, il se développera et s'il/elle clique sur un autre élément, il se développera également, mais il ne réduira pas l'élément cliqué précédemment.

Vous pouvez voir le code ci-dessous. Je sais où dois-je ajouter le code pour réduire et comment réduire et développer. Ma question est: comment sélectionner tous les éléments qui ont la classe '.collapsiblock' à l'exception de celui sur lequel l'utilisateur a cliqué ??

Remarque: l'élément qui a la classe '.collapsiblockCollapsed' est réduit et si cette classe est supprimée de l'élément, il est développé.

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

MISE À JOUR:

Le problème a été résolu en ajoutant le code suivant:

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

juste au-dessus de la ligne suivante:

$(this).removeClass('collapsiblockCollapsed');
javascriptjquerydrupalcontent-management-systemjavascript-framework
80
Hassan Al-Jeshi

Utilisez le sélecteur not .

Exemple:

$('.collapsiblock').click(function(){
     $('.collapsiblock').not(this).each(function(){
         $(this).slideUp();
     });
     $(this).slideDown();
})
155
Kristoffer Sall-Storgaard

Essaye ça,

Exemple:

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

C'est une meilleure façon parce que si vous utilisez chaque fonction pour qu'elle se charge et que vous ayez plus de milliers de div à l'avenir, cela prendra du temps à SlideUp ou SlideDown.

7
Bhavik Hirani

Vous pouvez suivre quel élément a déjà été cliqué avec votre propre gestionnaire de clics jquery et la fonction data (...) de jquery. Ensuite, filtrez en itérant vos éléments .collapsiblock avec la fonction de filtre (...) de jquery pour inclure les éléments dont vous avez besoin.

2
Adrian Grigore