javascript - jquery 内容切换使用 .slideToggle()

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>

查询

//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) 完成您的任务。请阅读here了解更多。

尝试，

$("#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