Link dentro de div collapse Bootstrap

[Julio Cavallari 3]

Tenho uma div que tem data-toglle collapse, mas preciso colocar um link clicável dentro dela sem que ela feche assim que eu clicar nele.

Alguém sabe como fazer isso?

[Maujor 144]

Sem ver o código fica difícil analisar.

[Julio Cavallari 3]

<table class='pure-table pure-table-horizontal'>
 <tbody>
  <tr>
   <td data-toggle='collapse' href='#collapse1'>
   <div class='no-decoration-white'><span class='caret'></span>  Agenda de Consultas</div>
   <div id='collapse1' class='collapse'>
    <table class='pure-table pure-table-horizontal'>
     <tbody>
      <tr>
       <td>
        <p>Sem consultas agendadas</p>
        <p>Clique <a href='agendar.html'>aqui</a> para agendar uma consulta</p>
       </td>
      </tr>
     </tbody>
    </table>
   </div>
   </td>
  </tr>
 </tbody>
</table>

É um código normal, mas quando eu tento clicar no link que está dentro da 'collapse' ele fecha a td, ao invés de abrir o link

[Maujor 144]

Isso ocorre porque eventos JavaScript (click, mouseover, mouseleave, etc) se propagam no DOM, ou seja, quando um evento é disparado em um elemento TODOS os seus elementos ascendentes 'recebem o evento'.

Na sua marcação, quando você clica o link (elemento a) o click é recebido pelos seguintes elementos ascendentes:
P, TD, TR, TBODY, TABLE, DIV, DIV, TD, TR, TBODY, TABLE, ..., BODY, HTML.

Observe que nesse caminho de propagação o elemento que fecha (collapse) é clicado e executa a ação de fechar ignorando a ação de seguir o link.

SOLUÇÃO: Cancelar o efeito de propagação do evento.

JavaScript prevê um método para isso. Uma vez que o Bootstrap usa jQuery o código jQuery para cancelamento, considerando a marcação que você postou, é como mostrado a seguir:

<script type="text/javascript">
$( "[data-toggle='collapse']  td" ).on("click", function(event) {
	event.stopPropagation();
}) 
</script>
 

Insira esse código no arquivo dos seus scripts personalizados (sem a tag SCRIPT), e se não houver um, insira antes da tag de fechamento de BODY (mantendo a tag SCRIPT).

Leitura complementar:
http://www.maujor.com/blog/2014/09/23/javascript-bubbling-e-capturing/

[aoliveira178 7]

Isso ocorre pq o seu colapse está programado em uma <TD>, portanto, se clicar no link será o mesmo que clicar na própria <TD> e o conteúdo será recolhido.

A solução mais simples é retirar o colapse da <TD> e colocar em outro elemento, prefiro usar uma outra <DIV>, teste assim:

<table class='pure-table pure-table-horizontal'>
 <tbody>
  <tr>
   <td>
   
   <div data-toggle='collapse' href='#collapse1'>
	<div class='no-decoration-white'><span class='caret'></span>  Agenda de Consultas</div>
   </div>
   
   <div id='collapse1' class='collapse'>
    <table class='pure-table pure-table-horizontal'>
     <tbody>
      <tr>
       <td>
        <p>Sem consultas agendadas</p>
        <p>Clique <a href='agendar.html'>aqui</a> para agendar uma consulta</p>
       </td>
      </tr>
     </tbody>
    </table>
   </div>
   </td>
  </tr>
 </tbody>
</table>

[Maujor 144]

A solução do aoliveira178 funciona porque o elemento que abre/fecha foi retirado da cadeia de elementos ancestrais do elemento a.

Se a sua marcação HTML não for gerada por CMS "fechado" e você puder alterá-la, a solução proposta por ele é sim mais simples.