bagaimana cara memilih semua kelas kecuali elemen yang diklik di JQuery?

91

Saya memiliki situs web yang dikembangkan di Drupal. Saya menggunakan modul yang disebut collapsiblock (pada dasarnya adalah plugin JQuery) untuk mencapai efek seperti akordeon. Ini berfungsi dengan baik dengan saya (meskipun dalam Beta). Tapi saya ingin memodifikasinya sehingga ketika pengguna mengklik satu item pada akordeon, item lainnya akan runtuh.

Dalam statistiknya saat ini, ia bekerja sedemikian rupa sehingga ketika pengguna mengklik satu item, ia akan memeriksa apakah item tersebut sudah ditutup atau diperluas dan itu akan membuat item menjadi sebaliknya. Itu berarti jika pengguna mengklik satu item, itu akan meluas dan jika dia mengklik item lain itu juga akan meluas, tetapi tidak akan menciutkan item yang sebelumnya diklik.

Anda bisa melihat kode di bawah ini. Saya tahu di mana saya harus menambahkan kode untuk menutup dan cara menutup dan memperluas. Pertanyaan saya adalah: Bagaimana cara memilih semua item yang memiliki kelas '.collapsiblock' kecuali yang telah diklik pengguna ??

Catatan: item yang memiliki kelas '.collapsiblockCollapsed' akan diciutkan dan jika kelas ini dihapus dari item, kelas tersebut akan diperluas.

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

MEMPERBARUI:

Masalah telah diselesaikan dengan menambahkan kode berikut:

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

tepat di atas baris berikut:

$(this).removeClass('collapsiblockCollapsed');
Hassan Al-Jeshi
sumber

Jawaban:

175

Gunakan notselektor.

Contoh:

$('.collapsiblock').click(function(){
     $('.collapsiblock').not(this).each(function(){
         $(this).slideUp();
     });
     $(this).slideDown();
})
Kristoffer Sall-Storgaard
sumber
Terima kasih banyak. Saya telah memecahkan masalah berdasarkan kode Anda. Lihat pembaruan dalam pertanyaan untuk lebih jelasnya
Hassan Al-Jeshi
Sempurna untuk membuat kotak centang radio-ish!
Michael
1
Solusi elegan not(this):)
numediaweb
Vanilla tolong! : D
xoxn-- 1'w3k4n
1
Tidak perlu menggunakan .each()- $('.collapsiblock').not(this).slideUp()seharusnya berfungsi dengan baik.
thdoan
8

Coba ini, Ini cara yang lebih baik karena jika Anda menggunakan masing-masing fungsi itu akan memuat dan di masa mendatang ketika Anda memiliki lebih dari seribu div akan membutuhkan waktu lama untuk meluncur ke atas dan ke bawah.

Contoh:

$('.collapsiblock').click(function(){
   $('.collapsiblock').not(this).slideUp();
   $(this).slideDown();
});
Bhavik Hirani
sumber
2

Anda dapat melacak elemen mana yang telah diklik dengan jquery click handler Anda sendiri dan fungsi data (...) jquery. Kemudian filter iterasi item .collapsiblock Anda dengan fungsi filter (...) jquery untuk memasukkan item yang Anda butuhkan.

Adrian Grigore
sumber