javascript - 使用 javascript/jQuery 更改可折叠 div 中的 css 背景图像

Question

如果可能的话，我正在寻找一些 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 的折叠/展开效果很好，点击时更改背景图像确实会使其看起来不错

Answer 1

您可以拥有一个具有所需背景设置的类(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');    
               }
           });
      });
});