দ্রুপালের উপর আমার একটি ওয়েবসাইট তৈরি হয়েছে। আমি এফেক্টের মতো অ্যাকর্ডিয়ন অর্জন করতে কলপসিব্লক (এটি মূলত একটি জিকুয়ের প্লাগইন) নামক একটি মডিউল ব্যবহার করি। এটি আমার সাথে ভাল কাজ করছে (যদিও এটি বিটাতে রয়েছে)। তবে আমি এটিকে সংশোধন করতে চাই যাতে ব্যবহারকারী যখন অ্যাকর্ডিয়ানের একটি আইটেমে ক্লিক করে অন্য আইটেমগুলি ধসে পড়ে।
বর্তমান পরিসংখ্যানগুলিতে, এটি এমনভাবে কাজ করছে যে ব্যবহারকারী যখন একটি আইটেমটিতে ক্লিক করেন, তখন এটি পরীক্ষা করবে যে আইটেমটি ইতিমধ্যে সঙ্কুচিত হয়েছে বা প্রসারিত হয়েছে এবং এটি আইটেমটিকে বিপরীত করে তুলবে। এর অর্থ ব্যবহারকারী যদি কোনও আইটেমটিতে ক্লিক করেন তবে এটি প্রসারিত হবে এবং যদি সে অন্য আইটেমে ক্লিক করে তবে তা প্রসারিত হবে, তবে এটি পূর্বে ক্লিক করা আইটেমটি ধসে পড়বে না।
আপনি নীচের কোড দেখতে পারেন। আমি জানি কোথায় কোডটি ধসে পড়তে হবে এবং কীভাবে ভেঙে যেতে এবং প্রসারিত করা উচিত। আমার প্রশ্নটি: আমি ক্লাসে থাকা সমস্ত আইটেম কীভাবে নির্বাচন করব?
দ্রষ্টব্য: যে আইটেমটিতে '.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');