0

CÓDIGO HTML

<!-- panel 1 -->
                <div class="panel panel-default pulse animated">
                     <div class="panel-heading" role="tab" id="headingOne">
                          <h4 class="panel-title">
                            <a id="link-open" class="text-pan collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                <center><i class="glyphicon glyphicon-map-marker gly-circle"></i></center></br>
                                <h2 id="title-cat">TÍTULO AQUI</h2>
                            </a>
                          </h4>    
                      </div>
                      <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body" id="panel-mob">
                          <div class="thumbnail">
                            <img data-src="holder.js/100%x200" alt="100%x200" src="imagens/background/screens-mob/bg-mob-one.jpg">
                            <div class="caption-mob panel-body">
                              <h3 class="caption-title-mob animated fadeInDown">SOLUÇÕES PET ONLINE</h3>
                              <p class="caption-text-mob animated fadeInDown">Busque as melhores noticias da região.</p>
                              <a href="petbusca/pet.html" class="btn btn-success btn-lg btn-config btn-mob"><span class="animated rubberBand">acessar »</span></a>  
                              </div>
                          </div>
                        </div>
                      </div>
                </div>

CÓDIGO CSS

#link-open {
  text-decoration: none;
  padding: 100%;
}

Pessoal, estou com o código acima para montar um accordion usando Bootstrap 3. Tudo está funcionando perfeitamente... O único problema é que estou tentando fazer o link "a" refereciado pelo css (link-open), ocupar toda a div, para que quando o usuário clicar no box, o usuário não tenha que clicar apenas no link, mas também consiga clicar na área do panel-heading inteira para abrir o box. O problema, é que quando usuo o padding: 100%, o meu link ocupa a página quase toda, e quando isso acontece, qualquer lugar que eu clico ele abre o box. Como eu faço para determinar a área de clique do meu link, somente dentro do box "panel-title", para assim que o usuário clicar em qualquer área do painel-title ele consiga abrir o box?

1
  • 1
    o seu HTML está com vários erros, por favor utilize o validador W3C para verificar e corrigir Commented 15/05/2015 às 11:09

1 Resposta 1

0

Pelo jQuery você pode utilizar a função click.

$('.panel-title').click(function(){ 
   // Abrir Box
});

Nesse caso você determina que todo espaço dentro do panel-title será receberá a função do click.

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 .