Javascript 使用.slideToggle（）进行jquery内容切换

我正在使用jquery进行内容切换，我不知道下一步该怎么做，我希望内容切换在切换打开时有一个图标（-），在切换关闭时有一个图标（+）。问题是我不知道如何实现这一点。这是我的代码：

HTML

Css

---

在页眉中添加一个新的跨距以容纳

+/-

，然后在单击文件夹中切换它

<div id="pane" class="menu_list">
    <p class="menu_head">Header-1<span>+</span>
    </p>
    <div class="menu_body" style="background:#999;">
        the quick brownn fox jumps over the lazy dog
    </div>
</div>

---

演示：

在页眉中添加一个新的跨距以容纳

+/-

，然后在单击文件夹中切换它

<div id="pane" class="menu_list">
    <p class="menu_head">Header-1<span>+</span>
    </p>
    <div class="menu_body" style="background:#999;">
        the quick brownn fox jumps over the lazy dog
    </div>
</div>

演示：

使用

.toggleClass（class1，class2）

完成任务。请阅读了解更多

试试看

和CSS

.minus{ background-image:url(minus.png); }
.plus{ background-image:url(plus.png); }

使用

.toggleClass（class1，class2）

完成任务。请阅读了解更多

试试看

和CSS

.minus{ background-image:url(minus.png); }
.plus{ background-image:url(plus.png); }

//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#pane p.menu_head").click(function () {
    $(this).css({
        backgroundImage: "url(minus.png)"
    }).next("div.menu_body").slideToggle(300);
    $(this).find('span').text(function (_, text) {
        return text == '+' ? '-' : '+'
    });
});

$("#pane p.menu_head").click(function(){
    $(this).toggleClass("plus minus").next("div.menu_body").slideToggle(300);
});

.minus{ background-image:url(minus.png); }
.plus{ background-image:url(plus.png); }