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