JQuery Accordion: как изменить фон страницы при закрытии заголовка - PullRequest
Новая
       15

JQuery Accordion: как изменить фон страницы при закрытии заголовка

1 голос
/ 12 августа 2011

Я действительно не могу найти решение по другим вопросам!

У меня есть то меню аккордеона, подобное этому: 

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

Идея состоит в том, что фон страницы меняется, когда пользователь щелкает в другом заголовке меню.

Однако я не могу найти способ просто установить фон «none», когда заголовок не активен (то есть все заголовки закрыты). Тогда фон - это стандарт страницы. Я пробовал связывать и другие вещи, но я действительно не могу это сделать.

Есть идеи?

Ответы [ 2 ]

0 голосов
/ 12 августа 2011

Вы можете привязать к событию 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");
        }
    }
});

Если вы хотите, чтобы фоновое изображение изменилось, как только анимационные панели гармошки начинают анимироваться, вы можете привязать к Изменения событие вместо

0 голосов
/ 12 августа 2011

Вы можете попробовать это 

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