I can not click on the link - jquery

Question

I can not click on the link - jquery

Navigation

#1 by (1 votes)

2

Hello, can anyone help me posted the code also in codepen , I can not click the link and I opened the PDF file, what happens is the div slideUp

Thank you very much for your attention!

(function($) { 
    $('.pasta').click(function() {
        $(this).children('.slide-lista').slideToggle('slow');
      return false;
    });    
})(jQuery);

.pasta{ cursor: pointer; border: 1px solid tomato }
.slide-lista{ display: none; }

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><ul><liclass="pasta"><strong>Indicador 1-1</strong>
                                    <div class="slide-lista"><ul>
                                  <li class="pasta"><strong>Projeto de Autoavaliação</strong>
                                    <div class="slide-lista"><ul><li class="arquivos"><a class="p-2" href="arquivos/Avaliação 6º ciclo 2018_2020.pdf" target="blank">Projeto Avaliação 6º ciclo 2018_2020.pdf</a></li></ul>    </div>
                                  </li>
                                </ul><ul>
                                  <li class="pasta"><strong>Relato Institucional</strong>
                                    <div class="slide-lista"><ul><li class="arquivos"><a class="p-2" href="arquivos/Relato Institucional.pdf" target="blank">Relato Institucional.pdf</a></li></ul>    </div>
                                  </li>
                                </ul>    </div>
                                  </li>
                                </ul>

javascript html jquery css

asked by anonymous 16.08.2018 / 03:12

1 answer

Invert "string" How do I get a URL parameter in Express?

score 1 · Accepted Answer

Because the link is part of the click event of class .pasta , add an exception to the class .p-2 (which is within the .pasta class) with stopPropagation() . This way clicking on the link with class .p-2 will not call the click event of class .pasta :

(function($) { 
    $('.pasta').click(function() {
        $(this).children('.slide-lista').slideToggle('slow');
      return false;
    });    
})(jQuery);

$(".p-2").click(function(e){
   e.stopPropagation();
});

.pasta{ cursor: pointer; border: 1px solid tomato }
.slide-lista{ display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><liclass="pasta"><strong>Indicador 1-1</strong>
<div class="slide-lista"><ul>
<li class="pasta"><strong>Projeto de Autoavaliação</strong>
<div class="slide-lista"><ul><li class="arquivos"><a class="p-2" href="arquivos/Avaliação 6º ciclo 2018_2020.pdf" target="blank">Projeto Avaliação 6º ciclo 2018_2020.pdf</a></li></ul>    </div>
</li>
</ul><ul>
<li class="pasta"><strong>Relato Institucional</strong>
<div class="slide-lista"><ul><li class="arquivos"><a class="p-2" href="arquivos/Relato Institucional.pdf" target="blank">Relato Institucional.pdf</a></li></ul>    </div>
</li>
</ul>    </div>
</li>
</ul>