I cannot click on the - jquery link

Asked

Viewed 33 times

2

Hello, someone can help me posted the code also in codepen, can’t click the link and opened the PDF file, what happens is the slideup of div.

Thanks 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>
                                  <li class="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>

1 answer

1


How the link is part of the class click event .pasta, add an exception to the class .p-2 (who is within the class .pasta) with stopPropagation(). This way when clicking on the link with the class .p-2 will not call the class click event .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>
<li class="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>

  • Thanks brother! 100%!!!!!!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.