Question

我正在使用来自this thread的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');
});

该脚本完美无缺。但是，如果内容显示，我不知道如何在标题（例如：+标题）之前附加加号和减号文字（+，-）或不。

我有以下永久性标记，它必须保持原样。不能添加更多的类或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文字的最后一个字符。如果最后一个字符为+，则将其更改为-，如果-更改为+。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何使用jquery为基本手风琴添加加减号？

2 个答案: