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');
sumber
not(this)
:).each()
-$('.collapsiblock').not(this).slideUp()
seharusnya berfungsi dengan baik.Contoh:
$('.collapsiblock').click(function(){ $('.collapsiblock').not(this).slideUp(); $(this).slideDown(); });
sumber
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.
sumber