手风琴不允许打开链接

问题描述

这是我用于手风琴的一些 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'))
  })
});

https://jsfiddle.net/yc6esxv0/