Jquery - 在 div 中创建可点击的链接，点击时会出现/消失

Question

I need a div to appear and disappear when clicked.我需要一个 div 在单击时出现和消失。 I managed to do it with Jquery.我设法用 Jquery 做到了。

Inside this div, I would like a link to be clickable too.在这个 div 里面，我也想要一个可以点击的链接。 The issue is that Jquery intercepts the click on the div before the link in itself.问题是 Jquery 在链接本身之前拦截了对 div 的点击。

How to solve this issue?如何解决这个问题？

Thanks a lot非常感谢

 $(document).on('click', '.warningmessagenew', function(event) { event.preventDefault(event); console.log("starting"); var shorttextdiv = $(this).children(".shorttext")[0]; var longtextdiv = $(this).children(".longtext")[0]; console.log(shorttextdiv); if ($(shorttextdiv).css('display') === 'none') { $(shorttextdiv).show(); $(longtextdiv).hide(); } else { $(shorttextdiv).hide(); $(longtextdiv).show(); } });

 .warningmessagenew { max-width: 700px; margin-right: auto; margin-left: auto; margin-top: 20px; }.shorttext { width: 100%; text-align: center; color: #bbcadf; font-size: 0.8em; cursor: pointer; margin-bottom: 30px; }.longtext { display: none; margin-right: auto; margin-left: auto; border-style: solid; border-radius: 5px; padding: 10px 10px 10px 10px; margin-bottom: 25px; line-height: 1.2em; width: 100%; }.longtextdesc { display: inline-block; margin-bottom: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <,DOCTYPE html> <html lang="fr"> <body> <div class="warningmessagenew d-flex"> <div class="shorttext">(Aide)</div> <div class="longtext"> <p>Lorem ipsum dolor sit amet, consectetur </p> <p> cf <a href="/risk/" id="covidarticles" class="exceptionlink" target="_blank">Lorem ipsum dolor sit amet.</a> consectetur adipiscing elit, Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leoLorem ipsum dolor sit amet. consectetur adipiscing elit, Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amet. consectetur adipiscing elit, Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo </p> </div> </div>

Answer 1

Try the below snippet.试试下面的代码片段。

 $(document).on('click', '.shorttext', function(event) { event.preventDefault(event); var shorttextdiv = $(this)[0]; var longtextdiv = $(this).next(".longtext")[0]; if ($(longtextdiv).css('display') === 'none') { $(longtextdiv).show(); } else { $(longtextdiv).hide(); } });

 .warningmessagenew { max-width: 700px; margin-right: auto; margin-left: auto; margin-top: 20px; }.shorttext { width: 100%; text-align: center; color: #bbcadf; font-size: 0.8em; cursor: pointer; margin-bottom: 30px; }.longtext { display: none; margin-right: auto; margin-left: auto; border-style: solid; border-radius: 5px; padding: 10px 10px 10px 10px; margin-bottom: 25px; line-height: 1.2em; width: 100%; }.longtextdesc { display: inline-block; margin-bottom: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <,DOCTYPE html> <html lang="fr"> <body> <div class="warningmessagenew d-flex"> <div class="shorttext">(Aide)</div> <div class="longtext"> <p>Lorem ipsum dolor sit amet, consectetur </p> <p> cf <a href="/risk/" id="covidarticles" class="exceptionlink" target="_blank">Lorem ipsum dolor sit amet.</a> consectetur adipiscing elit, Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leoLorem ipsum dolor sit amet. consectetur adipiscing elit, Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amet. consectetur adipiscing elit, Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo </p> </div> </div>

Here is also jsfiddle这里也是jsfiddle

Jquery - 在 div 中创建可点击的链接，点击时会出现/消失

问题描述

1 个解决方案

解决方案1
0 2021-04-12 13:00:08

Jquery - 在 div 中创建可点击的链接，点击时会出现/消失

问题描述

1 个解决方案

解决方案1 0 2021-04-12 13:00:08

解决方案1
0 2021-04-12 13:00:08