jqueryaccordion：如何更改页面'；关闭页眉时的背景

我真的找不到其他问题的答案

我的手风琴菜单与此类似：

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

其思想是，当用户单击菜单的其他标题时，页面的背景会发生变化

但是，当没有活动的标题（即所有标题都已关闭）时，我无法找到将背景设置为“无”的方法。然后，背景是页面标准。我尝试过绑定和其他事情，但我真的做不到

有什么想法吗？

你可以试试这个

$('#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");
   }
});

您可以绑定到手风琴事件。当所有窗格都折叠时，

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

---

如果您希望在手风琴窗格开始设置动画后立即更改背景图像，可以改为绑定到事件。

谢谢！它工作完美，是一个非常集成的解决方案！

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