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-tag看到加号和减号。

如果用户点击链接时更改+和 - 符号，我必须添加到现有的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

在一个简单的切换菜单jquery

1 个答案: