4

Preciso de uma ajuda com o seguinte problema, tenho o seguinte HTML, que faz parte de um acordion

 <div id="accordion2"> 

<h3 class="btn-sub-main"><a>Banho</a><div class="seta-btn-sub"></div></h3>
    <div id="outraDiv">
        <ul>
            <li><a href="#">condicionadores</a><span></span></li>
            <li><a href="#">sabonetes</a><span></span></li>
            <li><a href="#">shampoos</a><span></span></li>
            <li><a href="#">outros</a><span></span></li>
        </ul>
    </div>

<h3 class="btn-sub-main"><a>Higiene Infantil</a><div class="seta-btn-sub"></div></h3>
    <div id="outraDiv"> 
        <ul>
            <li><a href="#">condicionadores</a><span></span></li>
            <li><a href="#">sabonetes</a><span></span></li>
        </ul>
    </div>

<h3 class="btn-sub-main"><a>Alimentação</a><div class="seta-btn-sub"></div></h3>
    <div id="outraDiv"> 
        <ul>
            <li><a href="#">condicionadores</a><span></span></li>
            <li><a href="#">outros</a><span></span></li>
        </ul>
    </div>
</div>

Tenho o seguinte código Javascript que altera o fundo da DIV="seta-btn-sub" (imagem de seta):

$(function() {
    $("#accordion2").accordion({
        icons: null,
        beforeActivate: function( event, ui ) {
            $("#" + ui.newHeader.attr("id")).children(".seta-btn-sub").toggleClass("active");
            $("#" + ui.oldHeader.attr("id")).children(".seta-btn-sub").toggleClass("active");
        },
        create: function( event, ui ) {
            $("#" + ui.header.attr("id")).children(".seta-btn-sub").toggleClass("active");
        }
    });
});

Tentei de diversas formas fazer o que desejo baseado neste código, mas não consegui. Desejo que o h3 que tem a class "btn-sub-main" troque a cor do background quando o campo aria-hidden')=='true , ou que add uma class e por lá insiro as característica do CSS que desejo.

Abaixo outro script que existe neste accordion que me esconde/mostra a div="outraDiv", tentei usa-la juntando as duas de diversas formas mas não consegui.

controlaOutraDiv = function(selector){
    $("#accordion2 h3", selector).bind('click',function(){
        console.log($(this).next().attr('aria-hidden'));
        if($(this).next().attr('aria-hidden')=='true'){
            $("#outraDiv ul li").show();
           }else if($(this).next().attr('aria-hidden')=='false'){
            $("#outraDiv ul li").hide();

        }
    });
}

Código do efeito do accordion:

$(function() {
    $("#accordion2").accordion({
        collapsible: true
    });
    controlaOutraDiv("#accordion2");
});

jsFiddle

3
  • Dá para adicionar mais código aqui para ter um exemplo melhor do seu problema? jsfiddle.net/XQdc3
    – Sergio
    Commented 17/02/2014 às 19:03
  • 2
    Veja se melhorou um pouco amigo, este é todo o código JS que tenho referente ao accordion2 e inseri mais um pouco do html, já mostrando 2 tabelas do accordion2.
    – CRAJ
    Commented 17/02/2014 às 19:09
  • 1
    Antes de postar minha resposta vai uma dica: em uma mesma página html não coloque 2 elementos com um mesmo id assim como ver com <div id="outraDiv"> se precisar de vários elementos com a mesma identificação use classes assim <div class="outraDiv"> Commented 17/02/2014 às 19:18

2 Respostas 2

5

O próprio accordion já atribui uma classe ao elemento que está aberto, assim pode usar .ui-state-active para alcançar a div aberta. Note que o plugin usa uma background-image que precisa desabilitar se quiser usar o background.

Exemplo

h3.ui-state-active {
    background-color: #ccf;
    background-image: none;
}

Em relação à segunda parte da sua pergunta onde quer esconder os #outraDiv ul li penso que a resposta é também CSS.

Note que ID's duplicadas são HTML inválido e que isso causa quebras no código. Assim corrija no HTML id="outraDiv" para class="outraDiv" e teste este selector CSS em vez de jQuery:

h3.ui-state-active .outraDiv ul li{
    display: none;
}
0

Segundo a API do jQuery-ui accordion existe um evento chamado beforeActivate.

Este evento possui dois parâmetros event e ui onde:

  • event - Representa o tipo de evento que está sendo chamado, no caso é o beforeActivate
  • ui - Representa os elementos que este evento manipula
  • ui Type: Object
    • newHeader Type: jQuery The header that is about to be activated.(O cabeçalho que está prestes a ser ativado)
    • oldHeader Type: jQuery The header that is about to be deactivated. (O cabeçalho que está prestes a ser desativado)
    • newPanel Type: jQuery The panel that is about to be activated.(O conteúdo que está prestes a ser desativado)
    • oldPanel Type: jQuery The panel that is about to be deactivated.(O conteúdo que está prestes a ser desativado)

Desta forma assim como você utiliza ui.newHeader.attr("id") e ui.oldHeader.attr("id") para pegar os ids do cabeçalho que acabou de ser ativado e do cabeçalho que acabou de ser desativado respectivamente, você pode utilizar ui.newPanel.attr("id") e ui.oldPanel.attr("id") para para pegar os ids do conteúdo que acabou de ser ativado e do conteúdo que acabou de ser desativado respectivamente.

Dessa forma para trocar o background destes elementos você precisa utilizar ui.newPanel.attr("algum_atributo") ou ui.oldPanel.attr("algum_atributo") para pegar os atributos dos Panels.

Outra forma até mais simples de utilizar é fazer uso das classes que o próprio utiliza para definir qual header e panel estão ativos no momento.

São elas:

  • .ui-accordion-header-active - é usada no cabeçalho que está ativo
  • .ui-accordion-content-active - é usada no conteúdo que está ativo

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .