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

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

저는 Drupal에서 개발된 웹사이트를 가지고 있습니다.저는 아코디언과 같은 효과를 얻기 위해 collabsiblock(기본적으로 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');

셀렉터를 사용합니다.

예:

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

이거 해봐요.각 기능을 사용할 경우 로드되고 향후 1,000개 이상의 디브가 있을 경우 슬라이드 업 및 슬라이드 다운에 오랜 시간이 소요되기 때문에 이 방법이 더 좋습니다.

예:

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

사용자 고유의 jquery click 핸들러와 jquery의 data(...) 기능을 사용하여 어떤 요소를 이미 클릭했는지 추적할 수 있습니다.그런 다음 jquery의 필터(...) 기능으로 .collapsiblock 항목을 반복하여 필요한 항목을 포함하도록 필터링합니다.

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