改變CSS背景圖像使用javascript/jQuery的

我有一些JavaScript如果可能的話，我是一個可摺疊的列表上使用jQuery工作手後，想在相關CSS文件來改變背景圖像在列表的狀態改變CSS背景圖像使用javascript/jQuery的

這是在div

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

此html的是，將圖像（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點擊

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

我已經將代碼添加到。點擊（函數），試圖在.header_div改變背景的CSS標籤周圍起的展開/摺疊的JavaScript函數另一個文件（collapse.gif），但我不能得到它的工作，所以我想我會問專家，因爲我的JavaScript是真的生鏽

目前崩潰/展開的div工作正常有在點擊背景圖像變化能真正使好看

來源

2012-01-10 user891380

你的jQuery提到.expand_div沒有出現在你的HTML中。我們可以有更多關於它的信息嗎？如果您要定位的.expand_div實際上是您的.header_div，則應該不難找到用於更改「this」對象背景的jquery方法。 – TonioElGringo 2012-01-10 19:28:41

對不起我錯了jQuery函數是一個老版本，因爲我改名爲所有的div，使他們更容易理解，已經編輯了jQuery的功能相匹配的HTML和CSS .expand_div = .header_div – user891380 2012-01-10 20:08:34

由於雙方意見後下我總算得到th是工作

首先，我增加了一個全新的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'); 
      } 
     }); 
     }); 
});

添加和移除類電話必須圍繞互換，我有電話的slideToggle之前定義的VAR合作

，但感謝大家誰提出建議，我就從來沒有得到這WO rk否則

來源

2012-01-11 09:14:37 user891380

您可以用requried背景設置一個類並應用CL有條件的屁股。試試這個

CSS

.header_div_collapsed { 
    background: url(collapse.gif) no-repeat 95% !important; 
    }

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

來源

2012-01-10 19:29:33 ShankarSangoli

感謝所有的，會嘗試這兩個明天並讓你知道它是怎麼回事 – user891380 2012-01-10 22:42:27

你的腳本應該是這樣的，

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

來源

2012-01-10 19:30:44 redDevil

改變CSS背景圖像使用javascript/jQuery的

回答

相關問題