javascript - 包括加号+/减号到一个简单的切换菜单 jquery

Question

我有以下 html 代码:

            <div class="slide-button" data-content="panel1">
            <p><span id="panel-icon">+</span>Test1</p>
            </div>  
            <div id="panel1" style="display: none">
            <p> Test jquery menu1 </p>
            </div>


            <div class="slide-button" data-content="panel2">
            <p><span id="panel-icon">+</span>Test2</p>
            </div>  
            <div id="panel2" style="display: none">
            <p> Test jquery menu2 </p>
            </div>  

和下面的 jquery 代码:

$(".slide-button").on('click', function(){
    var panelId = $(this).attr('data-content');
    $('#'+panelId).toggle(500);
    });

切换本身完美运行。

但是，我还想包含一个加号和减号，您可以从我的 html 代码中的 span 标签中看到这一点。

我必须向我现有的 jquery 代码添加什么才能在用户单击链接时更改 + 和 - 符号？

感谢您的帮助:-)

Answer 1

如果你把它改成一个类

<div class="slide-button" data-content="panel1">
     <p><span class="panel-icon">+</span>Test1</p>
</div>  
<div id="panel1" style="display: none">
    <p> Test jquery menu1 </p>
</div>

你可以做

$(".slide-button").on('click', function(){
    var panelId = $(this).attr('data-content');
    $('#'+panelId).toggle(500);

    $(this).find('.panel-icon').text(function(_, txt) {
        return txt === "+" ? "-" : "+";
    });
});

FIDDLE