手风琴不允许打开链接

Question

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

Answer 1

你的问题是，点击 link 也会触发点击 li。因此，您必须获取 link 上的点击并停止传播。

看到这个fiddle

首先抱歉 fiddle 是空的。

$(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/

手风琴不允许打开链接

Accordion won't allow links to open

jquery

accordion