Aut*_*cus 10 jquery jquery-ui jquery-plugins
我正在使用下面的代码.我想要做的是在展开或折叠视图上有+或-符号.我怎样才能做到这一点？这是代码:
<!--//---------------------------------+
// 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>
Che*_*try 18
将标记更改为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("[-]");
});
最简单的方法是使用.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;
}