플러스와 아코디언에 마이너스 내가 <a href="http://jsfiddle.net/rW3KU/1/" rel="nofollow">here</a></p> <p>볼 수있는 작업 아코디언, 그래서

Question

좋아이 어딘가에 내가의 라인을 따라 뭔가가 필요 거기에 분명 내 자바 스크립트

$(document).ready(function ($) { 
    $('#accordion').find('.accordion-toggle').click(function() { 

     //Expand 
     $(this).next().slideDown('fast'); 
     $(this).children(".plusminus").text('-'); 

     //hide other panels 
     $(".accordion-content").not($(this).next()).slideUp('fast'); 

    }); 
}); 

입니다 :

를

  $(this).next().slideUp('fast'); 
      $(this).children(".plusminus").text('+'); 

내용 상자를 닫고 + 기호로 다시 변경하지만 어떻게해야하는지 잘 모릅니다. 어떤 도움이 필요합니까?

Answer 1

셀렉터에서이 작업을 수행하는 방법에는 여러 가지가 있으며, 가장 효율적인 것이 무엇인지 잘 모르겠지만 부모를 확보하고 형제를 선택하고 표시기를 찾는 것이 한 가지 방법입니다. 그렇다면 쉽게 설정할 수 있습니다. 여기에 기존의 코드를 사용하여이 방법 :

이

demo

$(document).ready(function ($) { 
    $('#accordion').find('.accordion-toggle').click(function() { 

     //Expand 
     $(this).next().slideDown('fast'); 
     $(this).parent().siblings().find(".plusminus").text('+'); 
     $(this).children(".plusminus").text('-'); 

     //hide other panels 
     $(".accordion-content").not($(this).next()).slideUp('fast'); 

    }); 
}); 

편집 :

훨씬 선호하는 방법 (제 생각에 적어도) 의사 요소 클래스를 사용하는 것입니다.

$(document).ready(function ($) { 
    $('#accordion').find('.accordion-toggle').click(function() { 

     //Expand 
     $(this).next().slideDown('fast'); 
     $(this) 
      .closest('.accordion-wrap').addClass('active') 
      .siblings().removeClass('active'); 

     //hide other panels 
     $(".accordion-content").not($(this).next()).slideUp('fast'); 

    }); 
}); 

demo

는 너무

.accordion-wrap .accordion-toggle::after { 
    content:'\000a0-'; 
} 
.accordion-wrap.active .accordion-toggle::after { 
    content:'\000a0+'; 
}