JQuery'de tıklanan öğe dışındaki tüm sınıflar nasıl seçilir?

Drupal üzerinde geliştirilmiş bir web sitem var. Akordeon benzeri efekt elde etmek için collapsiblock adlı bir modül (temelde bir JQuery eklentisidir) kullanıyorum. Benim için iyi çalışıyor (Beta'da olmasına rağmen). Ancak, kullanıcı akordeonun bir öğesini tıkladığında diğer öğelerin daraltılması için onu değiştirmek istiyorum.

Mevcut istatistiklerinde, kullanıcı bir öğeye tıkladığında, öğenin zaten daraltılmış veya genişletilmiş olup olmadığını kontrol edecek ve öğeyi tam tersi yapacak şekilde çalışıyor. Bu, kullanıcı bir öğeyi tıklarsa genişleyeceği ve başka bir öğeyi tıkladığında da genişleyeceği, ancak önceden tıklanan öğeyi daraltmayacağı anlamına gelir.

Aşağıdaki kodu görebilirsiniz. Daraltmak için kodu nereye eklemem gerektiğini ve nasıl daraltılacağını ve genişletileceğini biliyorum. Sorum şu: Kullanıcının tıkladığı öğe dışında '.collapsiblock' sınıfına sahip tüm öğeleri nasıl seçerim?

Not: '.collapsiblockCollapsed' sınıfına sahip öğe daraltılır ve bu sınıf öğeden kaldırılırsa genişletilir.

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

GÜNCELLEME:

Aşağıdaki kod eklenerek sorun çözüldü:

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

aşağıdaki satırın hemen üstünde:

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

notSeçiciyi kullanın .

Misal:

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

Bunu deneyin, bu daha iyi bir yoldur, çünkü her işlevi kullanırsanız, yüklenir ve gelecekte bin div değerinden fazlasına sahip olduğunuzda, yukarı ve aşağı kaymak uzun zaman alır.

Misal:

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

Kendi jquery tıklama işleyiciniz ve jquery'nin data (...) işlevi ile hangi öğenin tıklandığını takip edebilirsiniz. Daha sonra ihtiyacınız olan öğeleri dahil etmek için .collapsiblock öğelerinizi jquery'nin filtre (...) işleviyle yineleyerek filtreleyin.