JQueryでクリックされた要素を除くすべてのクラスを選択する方法


91

Drupalで開発したWebサイトがあります。collapsiblock(基本的にはJQueryプラグイン)と呼ばれるモジュールを使用して、アコーディオンのような効果を実現しています。私は問題なく動作しています(ただし、ベータ版です)。しかし、ユーザーがアコーディオンの1つのアイテムをクリックしたときに、他のアイテムが折りたたまれるように変更したいと思います。

現在の統計では、ユーザーが1つのアイテムをクリックしたときに、アイテムが既に折りたたまれているか展開されているかをチェックし、アイテムを反対にしています。つまり、ユーザーがあるアイテムをクリックすると展開され、別のアイテムをクリックすると展開されますが、前にクリックしたアイテムは折りたたまれません。

以下のコードを見ることができます。折りたたむコードをどこに追加すればよいか、折りたたんだり展開したりする方法を知っています。私の質問は、ユーザーがクリックしたものを除いて、クラス「.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');

回答:


173

notセレクターを使用します。

例:

$('.collapsiblock').click(function(){
     $('.collapsiblock').not(this).each(function(){
         $(this).slideUp();
     });
     $(this).slideDown();
})

どうもありがとうございました。私はあなたのコードに基づいて問題を解決しました。詳細については、質問の更新を参照してください
Hassan Al-Jeshi '26 / 08/26

ラジオっぽいチェックボックスを作るのに最適!
Michael Irey 2013

1
エレガントなソリューションnot(this):)
numediaweb 14

バニラください!:D
xoxn-- 1'w3k4n 2017年

1
使用する必要はありません.each()- $('.collapsiblock').not(this).slideUp()正常に動作するはずです。
thdoan 2017年

8

これを試してみてください。これは、各関数を使用するとロードされ、将来、1,000 divを超える場合は、上下にスライドするのに長い時間がかかるため、より良い方法です。

例:

$('.collapsiblock').click(function(){
   $('.collapsiblock').not(this).slideUp();
   $(this).slideDown();
});

2

独自のjqueryクリックハンドラーとjqueryのdata(...)関数を使用して、どの要素がすでにクリックされたかを追跡できます。次に、jcollaのフィルター(...)関数を使用して.collapsiblockアイテムの反復をフィルター処理し、必要なアイテムを含めます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.