使用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

您可以设置一个具有所需背景设置的类，并有条件地应用该类。 尝试这个

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');    
               }
           });
      });
});

Answer 2

您的脚本应该是这样的，

    jQuery(document).ready(function() {
     jQuery(".content_div").hide();
     //toggle the componenet with class msg_body
     jQuery(".expand_div").click(function()
     { 
        var elm = jQuery( this );
        jQuery(this).next(".content_div").slideToggle(500, function(){
              if(jQuery(this).is(":visible"))
                jQuery(elm).css({"background-image" : "collapse.gif"});
              else 
                jQuery(elm).css({"background-image" : "expand.gif"});
        });
     });
    });

Answer 3

感谢下面的两个建议，我设法使它起作用

首先，我添加了一个全新的css函数，因为仅定义背景不起作用

  .expand_div_collapsed {
    margin: 1px;
    color: #000;
    padding: 3px 10px;
    cursor: pointer;
    position: relative;
    background: url(collapsed.gif) no-repeat 95%;
    background-color:#ccc;
  }

然后将JS更改为此

jQuery(document).ready(function() {
      jQuery(".content_div").hide();

      //toggle the componenet with class msg_body
      jQuery(".header_div").click(function()
      {
       var co = jQuery(this);
       jQuery(this).next(".content_div").slideToggle(500, function(){

           if(jQuery(this).is(':visible')){
          jQuery(co).addClass('expand_div_collapsed');
           }
           else{
          jQuery(co).removeClass('expand_div_collapsed');
           }
       });
      });
});

add和remove类调用必须交换，我必须在slideToggle调用之前定义var co

但是感谢所有提出建议的人，否则我将永远无法做到这一点