如何使用jquery向基本手风琴添加加号和减号

How to add plus minus symbol to a basic accordion using jquery?

本文关键字：添加 手风琴 何使用 jquery      更新时间：2023-09-26

我使用的是Luca Filosofi在这个线程中编写的基本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>

当图标点击时，您可以切换图标，如下所示：

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

您需要使用.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>

相关文章：