如何使用 jQuery 在折叠和展开时在加号和减号之间切换？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2724786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use jQuery to switch between a plus and minus sign on collapse and expand?
提问by Asim Zaidi
I am using the code below. What I want to do is have a +or -sign on expanded or collapsed view. How can I do that? Here is the code:
我正在使用下面的代码。我想要做的是在展开或折叠视图上有一个+或-符号。我怎样才能做到这一点？这是代码：
<!--//---------------------------------+
// 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>
回答by Chetan Sastry
Change the markup of the msg_headto something like this-
将 的标记更改为msg_head这样的 -
<p class="msg_head">Header-1 <span>[-]</span></p>
and change the toggle function to look like this-
并将切换功能更改为如下所示-
$(".msg_head").click(function(){
$(this).next(".msg_body").slideToggle(100);
})
.toggle( function() {
$(this).children("span").text("[+]");
}, function() {
$(this).children("span").text("[-]");
});
回答by ahsteele
Easiest way to do this is with the .toggleClass( className ). Using this method you can add or remove a class from an element. So modifying your code to the (untested) code below should do the trick. You'll want to offset the padding by an equivalent amount to fit your graphic files.
最简单的方法是使用.toggleClass( className ). 使用此方法，您可以在元素中添加或删除类。因此，将您的代码修改为下面的（未经测试的）代码应该可以解决问题。您需要将填充偏移等量以适合您的图形文件。
JavaScript
JavaScript
$(".msg_head").click(function() {
$(this).next(".msg_body").slideToggle(100);
$(this).toggleClass('msg_head_expanded');
});
CSS
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;
}
回答by dclowd9901
I have this very thing on my own website. Here's how I do it:
我在我自己的网站上有这个东西。这是我的方法：
$(".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('+');
}
});
The HTML looks like this:
HTML 如下所示：
<div class="question">
<span>+</span>blahblah
</div>
<div class="answer">blahblah</div>
