如何使用 jquery 向基本手风琴添加加减号？答案

【问题标题】：How to add plus minus symbol to a basic accordion using jquery?如何使用 jquery 向基本手风琴添加加减号？
【发布时间】：2016-07-25 16:18:16
【问题描述】：

我正在使用 Luca Filosofi 从this thread 编写的基本 jQuery 手风琴。这是我的版本：

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

脚本完美运行。但是，我不知道如何在 Title（例如：+ Title）之前附加正负文本（+、-），具体取决于内容是否显示。

我有以下永久标记，它必须保持原样。不得添加更多类或 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>

【问题讨论】：

内容是否显示是什么意思。?
我使用多个描述来定义一个术语，将
视为触发按钮，将同一组中的所有

视为内容。单击单个

将展开其所有内容并自动折叠其他组内容。就像垂直标签

标签： javascript jquery html accordion

【解决方案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");
});

【讨论】：

我做了一点修改，把'i'改成了'dt'。 — 但它会触发一个活动类作为切换，而不是手风琴。它仅在单击相同的“dt”时删除活动类。
他们找到有加号的元素，把它变成一个减号，然后把当前点击的一个变成一个加号。 $('.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'); $('.product-details .post-body').find('.icon-circle-plus').attr('class', 'icon-circle-minus'); $(this).closest('dt').attr('class', 'icon-circle-plus'); });希望对你有帮助

【解决方案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>

【讨论】：

感谢您的回答。不幸的是，我们已经使用给定的标记发布了数百篇文章，而且还会有更多文章，因此为每篇文章自定义 html 确实需要大量工作，这对于未来的发布来说不是一个好的步骤。我们最好坚持使用默认 HTML，而不添加额外的符号或 html 行，除非通过 jQuery。
@Biyan 没问题。您可以使用 jquery 来做到这一点，例如 demo
如何在标题前移动“+/-”？
我查看了演示，但它似乎无法正常工作。例如如果我单击第一个组，并且没有关闭它单击另一个组，则第一个组上的 +/- 符号不会改变。
在多次点击和切换时逻辑也被破坏了。