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

你可以试试这个

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

Answer 2

您可以绑定到手风琴的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事件。

JQuery Accordion：关闭标题时如何更改页面的背景

2 个答案: