我需要一个div，以便在单击时显示和消失。我设法用Jquery做到了。
在这个div中，我希望有一个链接也可以点击。问题是Jquery在链接之前拦截了对div的点击。
如何解决这个问题？
非常感谢
$(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>尝试下面的代码段。
$(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>这里还有jsfiddle