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)完成您的任务。请阅读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

Answer 2

在标题中添加新范围以保留+/-，然后在点击操作中将其切换

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

演示：Fiddle

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

2 个答案:

DEMO