使用.slideToggle（）進行jquery內容切換

Question

我正在使用jquery進行內容切換，我不知道接下來該做什么，我希望內容切換在切換打開時有一個圖標（ - ），當切換關閉時，（+）圖標問題是我不知道如何實現它是我的代碼：

HTML

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

jQuery的

//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);
});

CSS

.menu_list {
    width: 100%;
}
.menu_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    margin:1px;
       font-weight:bold;
       background: #eef4d3 url(plus.png) center right no-repeat;
}
.menu_body {
    display:none;
}

Answer 1

使用.toggleClass(class1,class2)來完成任務。 請在此閱讀以了解更多信息。

嘗試，

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

和CSS

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

DEMO

Answer 2

在標題中添加新的span以保持+/-然后在click hanlder中切換它

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

然后

//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 == '+' ? '-' : '+'
    });
});

演示： 小提琴