加減手風琴

Question

好了，所以我有一個工作手風琴，由此可以看出here

這是我的javascript

$(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'); 

    }); 
}); 

編輯：

非常優選的方法（在我看來至少）是使用一類具有一個僞元素。

demo

$(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'); 

    }); 
}); 

再有一類像這樣

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