如何使用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>