Tôi có một trang web được phát triển trên Drupal. Tôi sử dụng một mô-đun có tên là openssiblock (về cơ bản nó là một plugin JQuery) để đạt được hiệu ứng như đàn accordion. Nó đang hoạt động tốt với tôi (mặc dù nó đang ở phiên bản Beta). Nhưng tôi muốn sửa đổi nó để khi người dùng nhấp vào một mục của đàn accordion, các mục khác sẽ sụp đổ.
Trong thống kê hiện tại, nó đang hoạt động theo cách mà khi người dùng nhấp vào một mục, nó sẽ kiểm tra xem mục đó đã được thu gọn hay mở rộng chưa và nó sẽ làm cho mục đó ngược lại. Điều đó có nghĩa là nếu người dùng nhấp vào một mục, nó sẽ mở rộng và nếu họ nhấp vào một mục khác, nó cũng sẽ mở rộng, nhưng nó sẽ không thu gọn mục đã nhấp trước đó.
Bạn có thể xem đoạn mã dưới đây. Tôi biết nơi tôi nên thêm mã để thu gọn và cách thu gọn và mở rộng. Câu hỏi của tôi là: Làm cách nào để chọn tất cả các mục có lớp '.collapsiblock' ngoại trừ một mục mà người dùng đã nhấp vào ??
Lưu ý: mục có lớp '.collapsiblockCollapsed' sẽ bị thu gọn và nếu lớp này bị xóa khỏi mục, nó sẽ được mở rộng.
// $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) : {};
};
CẬP NHẬT:
Sự cố đã được giải quyết bằng cách thêm mã sau:
$('.collapsiblock').not(this).each(function(){
$(this).addClass('collapsiblockCollapsed');
$(this.target).animate({height:'hide', opacity:'hide'}, slidespeed);
});
ngay trên dòng sau:
$(this).removeClass('collapsiblockCollapsed');