如何使用jQuery在折叠和展开时在加号和减号之间切换？答案

【问题标题】：How to use jQuery to switch between a plus and minus sign on collapse and expand?如何使用jQuery在折叠和展开时在加号和减号之间切换？
【发布时间】：2010-04-27 20:22:40
【问题描述】：

我正在使用下面的代码。我想要做的是在展开或折叠视图上有一个 + 或 - 标志。我怎样才能做到这一点？代码如下：

<!--//---------------------------------+
//  Developed by Roshan Bhattarai  |
//  http://roshanbh.com.np         |
//  Fell Free to use this script   |
//---------------------------------+-->
<title>Collapsible Message Panels</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    //hide the all of the element with class msg_body
    $(".msg_body").show();
    //toggle the componenet with class msg_body
    $(".msg_head").click(function(){
        $(this).next(".msg_body").slideToggle(100);
    });
});
</script>
<style type="text/css">
body {
    margin: 10px auto;
    width: 570px;
    font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
p {
    padding: 0 0 1em;
}
.msg_list {
    margin: 0px;
    padding: 0px;
    width: 383px;
}
.msg_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    background-color:#FFCCCC;
    margin:1px;
}
.msg_body {
    padding: 5px 10px 15px;
    background-color:#F4F4F8;
}
</style>
</head>
<body>
<div align="center">
  <p>Click on the each news head to toggle
</p>

</div>
<div class="msg_list">
        <p class="msg_head">Header-1 </p>
        <div class="msg_body">
            orem ipsum dolor sit amet
        </div>

        <p class="msg_head">Header-2</p>
        <div class="msg_body">
            consectetuer adipiscing elit orem ipsum dolor sit amet
        </div>
</div>
</body>
</html>

【问题讨论】：

标签： jquery-ui jquery-plugins jquery

【解决方案1】：

将msg_head 的标记更改为类似这样-

<p class="msg_head">Header-1 <span>[-]</span></p>

并将切换功能更改为如下所示-

$(".msg_head").click(function(){
    $(this).next(".msg_body").slideToggle(100);
})
.toggle( function() {
    $(this).children("span").text("[+]");
}, function() {
    $(this).children("span").text("[-]");
});

【讨论】：

我只是想指出我有一些与此完全相似的东西，但我的 click div 使用了 href 链接。如果我将 span 标签放在标签内，它将不起作用。我在这里做了一个小提琴：jsfiddle.net/ultraloveninja/xBxa4/5 我很确定有一种方法可以使它与 href 链接一起使用，但我只是想分享一下，因为我拉着头发想知道为什么它不适合我。

【解决方案2】：

最简单的方法是使用.toggleClass( className )。使用此方法，您可以从元素中添加或删除类。因此，将您的代码修改为下面的（未经测试的）代码应该可以解决问题。您需要将填充偏移等量以适合您的图形文件。

JavaScript

$(".msg_head").click(function() {
    $(this).next(".msg_body").slideToggle(100);
    $(this).toggleClass('msg_head_expanded');
});

CSS

.msg_head
{
  padding: 5px 10px;
  cursor: pointer;
  position: relative;
  background:#FFCCCC url('plus.png') no-repeat 0 50;
  margin:1px;
}

.msg_head_expanded
{
   background:#FFCCCC url('minus.png') no-repeat 0 50;
}

【讨论】：

您需要将.toggleClass 应用于$(this) 而不是点击功能之外的.msg_head。它需要$('.msg_body').hide();
@fudgey 我认为 .slideToggle 为您完成了隐藏。我已将 .toggleClass 拉到事件内部，但我认为将其以菊花链方式连接到 .click 很酷。老实说，我知道足够多的 jQuery 是危险的。所以这对我来说是一个很好的学习机会，因为我并不声称自己是专家，只是一个好奇的专业人士，希望提高自己。 ;-)
实际上它确实按照您的想法进行，但是将其置于 click 函数之外使其在隐藏消息时添加 msg_head_expanded 类。在点击头部之后，toggleClass 没有被再次调用，所以msg_head_expanded 类一直存在。无论如何，我给了你+1，因为这就是我现在要做的:)
@fudgey 现在我明白你在说什么了。感谢您的反馈。更正是我临时发布代码时发生的事情。

【解决方案3】：

我自己的网站上有这个东西。这是我的做法：

$(".question").click(function () {
    if ($(this).next(".answer").is(":hidden")) {
        $(this).next(".answer").slideDown("slow");
        $(this).children('span').text('-');
    } else {
        $(this).next(".answer").slideUp("slow");
        $(this).children('span').text('+');
    }
});

HTML 如下所示：

<div class="question">
    <span>+</span>blahblah
</div>
<div class="answer">blahblah</div>

【讨论】：