JQuery에서 클릭 한 요소를 제외한 모든 클래스를 선택하는 방법은 무엇입니까?

JQuery에서 클릭 한 요소를 제외한 모든 클래스를 선택하는 방법은 무엇입니까?

---

Drupal에서 개발 한 웹 사이트가 있습니다. 나는 collapsiblock (기본적으로 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');

---

not선택기를 사용하십시오 .

예:

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

---

이 시도,

예:

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

이것은 더 나은 방법입니다. 각 함수를 사용하면로드되고 앞으로는 수천 div가 더 많아서 SlideUp 또는 SlideDown에 오랜 시간이 걸리기 때문입니다.

---

You could keep track of which element has already been clicked with your own jquery click handler and jquery's data(...) function. Then filter iterating your .collapsiblock items with jquery's filter (...) function to include the items you need.

참고URL : https://stackoverflow.com/questions/3572224/how-to-select-all-class-except-the-clicked-element-in-jquery