[javascript] 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();
})


답변

이것을 시도해보십시오. 각 기능을 사용하면로드되고 앞으로 1,000 개 이상의 div가있을 때 위로 슬라이드하고 아래로 슬라이드하는 데 오랜 시간이 걸리기 때문에 더 좋은 방법입니다.

예:

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


답변

자신의 jquery 클릭 핸들러와 jquery의 data (…) 함수를 사용하여 이미 클릭 된 요소를 추적 할 수 있습니다. 그런 다음 jquery의 필터 (…) 함수로 .collapsiblock 항목을 반복하여 필요한 항목을 포함하도록 필터링합니다.


답변