как выбрать все классы, кроме нажатого элемента в JQuery?
у меня есть сайт, разработанный на Drupal. Я использую модуль под названием collapsiblock (это в основном плагин JQuery) для достижения эффекта аккордеона. Он отлично работает со мной (хотя он находится в бета-версии). Но я хочу изменить его так, что когда пользователь нажимает на один элемент аккордеона, другие элементы будут свернуты.
в своей текущей статистике он работает таким образом, что когда пользователь нажимает на один элемент, он проверяет, свернут ли элемент или развернут, и он сделает пункт наоборот. Это означает, что если пользователь нажимает на один элемент, он будет расширяться, и если он/она нажимает на другой элемент, он также будет расширяться, но он не свернет ранее нажатый элемент.
вы можете увидеть ниже код. Я знаю, где я должен добавить код, чтобы свернуть и как свернуть и развернуть. Мой вопрос: как мне выбрать все элементы, которые имеют класс '.collapsiblock ' кроме того, что пользователь нажал??
Примечание: элемент, который имеет класс '.collapsiblockCollapsed ' get collapsed и если этот класс удаляется из элемента, он расширяется.
// $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) : {};
};
обновление:
проблема была решена путем добавления следующего кода:
$('.collapsiblock').not(this).each(function(){
$(this).addClass('collapsiblockCollapsed');
$(this.target).animate({height:'hide', opacity:'hide'}, slidespeed);
});
чуть выше следующей строки:
$(this).removeClass('collapsiblockCollapsed');
3 ответа:
использовать
not
селектор.пример:
$('.collapsiblock').click(function(){ $('.collapsiblock').not(this).each(function(){ $(this).slideUp(); }); $(this).slideDown(); })
попробуйте это,
пример:
$('.collapsiblock').click(function(){ $('.collapsiblock').not(this).slideUp(); $(this).slideDown(); });
Это лучший способ, потому что если вы используете каждую функцию, чтобы она загружалась, и в будущем у вас есть более тысячи div, поэтому потребуется много времени, чтобы скользить или скользить вниз.