如果可能的话,我正在寻找一些 JavaScript,我正在使用 jQuery 处理可折叠列表,并希望根据列表的状态更改 css 文件中的背景图像
这是 div 的 html
<div class="collapse_div">
<div class="header_div">header text</div>
<div class="content_div">
Some text
</div>
<div class="header_div">another header</div>
<div class="content_div">
some more text
</div>
</div>
这是将图像 (expanded.gif) 放入标题 div 的 .css
.collapse_div{
margin: 0;
padding: 0;
width: 500px;
}
.header_div {
margin: 1px;
color: #000;
padding: 3px 10px;
cursor: pointer;
position: relative;
background: url(expanded.gif) no-repeat 95%;
background-color:#ccc;
}
.content_div {
padding: 5px 10px;
background-color:#fafafa;
}
这是控制点击 header_div 时展开/折叠的 JavaScript 函数
jQuery(document).ready(function() {
jQuery(".content_div").hide();
//toggle the componenet with class msg_body
jQuery(".header_div").click(function()
{
jQuery(this).next(".content_div").slideToggle(500);
});
});
我尝试过向 .click(function) 添加代码,尝试将 .header_div 中的背景 css 标记更改为另一个文件 (collapse.gif),但我无法让它工作,所以我想我会问专家,因为我的 javascript 真的很生锈
目前,div 的折叠/展开效果很好,点击时更改背景图像确实会使其看起来不错
最佳答案
您可以拥有一个具有所需背景设置的类(class),并有条件地应用该类(class)。试试这个
CSS
.header_div_collapsed {
background: url(collapse.gif) no-repeat 95% !important;
}
JS
jQuery(document).ready(function() {
jQuery(".content_div").hide();
//toggle the componenet with class msg_body
jQuery(".expand_div").click(function()
{
jQuery(this).next(".content_div").slideToggle(500, function(){
var $this = $(this);
if($this.is(':visible')){
$this.removeClass('header_div_collapsed');
}
else{
$this.addClass('header_div_collapsed');
}
});
});
});
关于javascript - 使用 javascript/jQuery 更改可折叠 div 中的 css 背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8809250/