如何在JQuery中选择除被点击元素外的所有类？
如何在JQuery中选择除被点击元素外的所有类？
提问于 2010-08-26 13:15:54
我有一个在Drupal上开发的网站。我使用了一个叫做折叠块的模块(它基本上是一个JQuery插件)来实现类似折叠的效果。它对我来说工作得很好(尽管它是Beta版)。但是我想修改它，这样当用户点击手风琴的一个项目时，其他项目就会折叠起来。
在它当前的统计数据中，它的工作方式是当用户点击一个项目时，它将检查该项目是否已经折叠或展开，并将使该项目相反。这意味着如果用户点击一个项目，它会展开，如果他/她点击另一个项目，它也会展开，但不会折叠之前点击的项目。
你可以看到下面的代码。我知道应该在哪里添加要折叠的代码，以及如何折叠和展开。我的问题是:除了用户单击的项之外，如何选择所有具有类“.collapsiblock”的项？？
注意:具有类“.collapsiblockCollapsed”的项将折叠，如果从项中删除该类，则展开项。
// $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
Stack Overflow用户
回答已采纳
发布于 2010-08-26 13:51:11
使用not选择器。
示例：
$('.collapsiblock').click(function(){
$('.collapsiblock').not(this).each(function(){
$(this).slideUp();
});
$(this).slideDown();
})Stack Overflow用户
发布于 2016-08-03 15:25:10
试一下，这是一个更好的方法，因为如果你使用它将加载的每个函数，并且将来当你有超过1000个div时，它将需要很长时间来上下滑动。
示例：
$('.collapsiblock').click(function(){
$('.collapsiblock').not(this).slideUp();
$(this).slideDown();
});Stack Overflow用户
发布于 2010-08-26 13:20:48
您可以使用自己的jquery点击处理程序和jquery的数据(...)来跟踪哪个元素已经被单击函数。然后使用jquery的过滤器(...)迭代您的.collapsiblock项函数以包含所需的项。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3572224
复制相关文章
相似问题