如何使用jquery將加減號添加到基本手風琴？

Question

我使用的是由Luca Filosofi編寫的基本jQuery手風琴，來自this thread。這是我的版本：

$('.product-details .post-body dl dt').on('click', function (e) { 
    e.preventDefault(); 
    $(this).parent('dl').children('dd:visible').slideUp('fast'); 
    $(this).nextUntil('dt').filter(':not(:visible)').slideDown('fast'); 
}); 

該腳本完美地工作。但是，我不知道如果在標題（例如：+標題）之前加上加號和減號文字（+,-），如果顯示或不顯示內容。

我有以下永久標記，它必須保持原樣。不能添加更多的類或HTML，除了通過jQuery：

<dl> 
    <dt>Title</dt> 
    <dd>Description 01</dd> 
    <dd>Description 02</dd> 

    <dt>Title</dt> 
    <dd>Description 01</dd> 
    <dd>Description 02</dd> 
    <dd>Description 03</dd> 
</dl> 

Answer 1

你可以切換圖標，當用戶點擊這樣的：

$('.product-details .post-body dl dt').on('click', function (e) { 
    e.preventDefault(); 
    $(this).parent('dl').children('dd:visible').slideUp('fast'); 
    $(this).nextUntil('dt').filter(':not(:visible)').slideDown('fast'); 
    $(this).closest('i').toggleClass("icon-circle-plus icon-circle-minus"); 
}); 

Answer 2

您需要獲得使用.slice()dt文本的最後一個字符。如果最後一個字符是+更改爲-，如果它是-更改爲+。

$('dl dd').slideUp('fast'); 
 
$('dl dt').on('click', function() { 
 
    $(this).parent().children('dd:visible').slideUp('fast'); 
 
    $(this).nextUntil('dt').not(':visible').slideDown('fast'); 
 
    $(this).text(function(i, text){ 
 
     return (text.slice(-1) == "-") ? (text.slice(0, -1) + " +") : (text.slice(0, -1) + " -"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<dl> 
 
    <dt>Title +</dt> 
 
    <dd>Description 01</dd> 
 
    <dd>Description 02</dd> 
 
    <dt>Title +</dt> 
 
    <dd>Description 01</dd> 
 
    <dd>Description 02</dd> 
 
    <dd>Description 03</dd> 
 
</dl>