如何解决手风琴不允许打开链接
这是我用于手风琴的一些 js。当我点击一个 LI 时,它会像它应该的那样打开,但问题是如果我在那个开放区域有链接,当我尝试点击它们时它会关闭。
LI 如何保持打开状态以便我可以点击链接?
$(document).ready(function(){
$('.accordion-list > li > .answer').hide();
$('.accordion-list li').click(function() {
if ($(this).hasClass("active")) {
$(this).removeClass("active").find(".answer").slideUp();
} else {
$(".accordion-list > li.active .answer").slideUp();
$(".accordion-list > li.active").removeClass("active");
$(this).addClass("active").find(".answer").slideDown();
}
return false;
});
});
如果有帮助,这里是手风琴 html:
<ul class="accordion-list">
<li class="section1 show">
<h4>Data Sheets</h4>
<div class="answer">
<div class="data-sheets">
<p><a href="https://yahoo.com">Yahoo</a></p>
<p><a href="https://google.com">Google</a></p>
</div>
</div>
</li>
<li class="section2 show">
<h4 class="title">Manuals</h4>
<div class="answer">
<div class="manuals">
<p><a href="https://yahoo.com">Yahoo</a></p>
<p><a href="https://google.com">Google</a></p>
</div>
</div>
</li>
</ul>
解决方法
您的问题是,点击链接也会触发点击 li。因此,您必须获取链接上的点击并停止传播。
看这个小提琴
抱歉,第一个小提琴是空的。
$(document).ready(function(){
$('.accordion-list > li > .answer').hide();
$('.accordion-list li').click(function() {
if ($(this).hasClass("active")) {
$(this).removeClass("active").find(".answer").slideUp();
} else {
$(".accordion-list > li.active .answer").slideUp();
$(".accordion-list > li.active").removeClass("active");
$(this).addClass("active").find(".answer").slideDown();
}
return false;
});
$('a').click(function(event)
{
event.stopPropagation();
console.log($(this).attr('href'))
})
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。