JQuery Accordion：關閉標題時如何更改頁面背景

Question

我真的無法在其他問題上找到解決方案！

我有與此類似的摺疊式菜單：

<div id="accordion" style="font-size:1em;"> 
      <h3 id="lactics" style="margin-top:50px"><a href="#">Làctics</a></h3> 
      <div> 
       <p><a href="#">Iogurts</a></p> 
       <p><a href="#">Pastissos</a></p> 
       <p><a href="#">Llet</a></p> 
       <p><a href="#">Formatges</a></p> 
       <p><a href="#">Altres</a></p> 
      </div> 
      <h3 id="embotits"><a href="#">Embotits</a></h3> 
      <div> 
       <p><a href="#">Pernil</a></p> 
       <p><a href="#">Embotits</a></p> 
       <p><a href="#">Botifarres</a></p> 
      </div> 
</div> 

而且我有一個jQuery代碼：

$(document).ready(function() { 
$(function() { 
    $("#accordion").accordion({ 
     collapsible: true, 
     active: true, 
     autoHeight: false, 
    }); 
}) 
$('#lactics').click(function() { 
    $("#prods_vcts").css("background","url(images/taula_vcts_lactics.png) no-repeat"); 
}) 
$('#embotits').click(function() { 
    $("#prods_vcts").css("background","url(images/taula_vcts_embotits.png) no-repeat"); 
}); 
}); 

的想法是，頁面變化的背景下，當用戶點擊其他菜單的標題。

但是，我找不到在沒有活動標題（即所有標題都關閉）的情況下將背景設置爲'無'的方法。然後，背景是頁面標準。我試過綁定和其他的東西，但我真的不能這樣做。

任何想法？

Answer 1

您可以綁定到change事件手風琴。當所有窗格都崩潰了，ui.newHeader將是一個空的jQuery對象：

$("#accordion").accordion({ 
    collapsible: true, 
    active: true, 
    autoHeight: false, 
    change: function(event, ui) { 
     if (!ui.newHeader.length) { 
      $("#prods_vcts").css("background-image", "none"); 
     } else { 
      $("#prods_vcts").css("background", "url(images/taula_vcts_" 
       + ui.newHeader.attr("id") + ".png) no-repeat"); 
     } 
    } 
}); 

如果您希望背景圖像儘快手風琴窗格開始生動活潑的改變，你可以綁定到changestart事件來代替。

Answer 2

你可以試試這個

$('#lactics').click(function() { 
    if($(this).parent().find("ui-state-active").length != 0){ 
    $("#prods_vcts").css("background","url(images/taula_vcts_lactics.png) no-repeat"); 
    } 
    else{ 
     $("#prods_vcts").css("background", "none"); 
    } 
}) 
$('#embotits').click(function() { 
    if($(this).parent().find("ui-state-active").length != 0){ 
    $("#prods_vcts").css("background","url(images/taula_vcts_embotits.png) no-repeat"); 
    } 
    else{ 
     $("#prods_vcts").css("background", "none"); 
    } 
});