मेरे पास Drupal पर विकसित एक वेबसाइट है। मैं एक मॉड्यूल का उपयोग करता हूं जिसे कॉलैप्सिब्लॉक कहा जाता है (यह मूल रूप से एक JQuery प्लगइन है) प्रभाव की तरह समझौते को प्राप्त करने के लिए। यह मेरे साथ ठीक काम कर रहा है (हालांकि यह बीटा में है)। लेकिन मैं इसे संशोधित करना चाहता हूं ताकि जब उपयोगकर्ता समझौते के एक आइटम पर क्लिक करे तो अन्य आइटम ढह जाएंगे।
अपने वर्तमान आंकड़ों में, यह इस तरह से काम कर रहा है कि जब उपयोगकर्ता एक आइटम पर क्लिक करता है, तो यह जांच करेगा कि क्या आइटम पहले से ही ढह गया है या विस्तारित है और यह आइटम को विपरीत बना देगा। इसका मतलब है कि यदि उपयोगकर्ता किसी एक आइटम पर क्लिक करता है तो उसका विस्तार होगा और यदि वह किसी अन्य आइटम पर क्लिक करता है, तो उसका विस्तार भी होगा, लेकिन यह पहले से क्लिक की गई वस्तु को ध्वस्त नहीं करेगा।
आप नीचे दिए गए कोड को देख सकते हैं। मुझे पता है कि मुझे कोड को कहां गिराना चाहिए और कैसे संक्षिप्त और विस्तृत करना चाहिए। मेरा सवाल है: मैं उन सभी वस्तुओं का चयन कैसे कर सकता हूं जिनके पास वर्ग '.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');