Question

我设置这个手风琴来听取包装上的点击，但是用户应该能够突出显示并复制手风琴中的文本，因此当内部文本发生单击时，我怎么能阻止点击事件触发手风琴？

这是HTML结构：

<div class="accordion-wrap">
              <div class="accordion-item">
                <p class="accordion-header"> Accordion header <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
              </div>
              <div class="accordion-text">
                <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. </p>
              </div>
</div>

JS：

$(".accordion-wrap").on("click", function(event){

    // I have tried with this, but the click is always registered on the wrap:

    if( $(event.target).hasClass("accordion-text") ){
      event.preventDefault;
      return;
    }

      $(this).children().eq(1).slideToggle(300);  
      $(this).children().eq(0).toggleClass("accordion-no-bar");
      $(this).siblings().find(".accordion-header").removeClass("accordion-gold");
      $(this).siblings().find(".accordion-header i").removeClass("rotate-fa");
      $(this).find(".accordion-header").toggleClass("accordion-gold");
      $(this).find(".fa").toggleClass("rotate-fa");
      $(".accordion-wrap .accordion-text").not($(this).children().eq(1)).slideUp(300);    
});

有没有一种方法可以做到这一点，而不是重新整理听取手风琴标题点击的全部内容（这是一种可能的解决方案，但我有兴趣知道它是否可能）？< / p>

示例：https://codepen.io/SergiOca/pen/GEdRdX

Answer 1

请试一试。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion-wrap">
              <div class="accordion-item">
                <p class="accordion-header"> Accordion header <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
              </div>
              <div class="accordion-text">
                <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. </p>
              </div>
</div>

＆＃13;

bad allocation

＆＃13;

Answer 2

你必须使用事件委托并设置事件监听器来监听标签＆＃34;更高＆＃34;在层次结构中，具有来自子元素的特定css类的过滤器。在这种情况下，我们必须为来自.accordion-text的点击事件设置一个监听器，并阻止它们关闭你的手风琴。我们还为来自包含.accordion-header类的元素的单击事件设置了侦听器。我还改进了一点事件处理函数。

这是pen。

以下是代码：

＆＃13;

$('body').on('click', '.accordion-text', function (event) {
  event.preventDefault();
});
 
$('body').on('click', '.accordion-header', function (event) {
  let accordionWrap = $('.accordion-wrap');
  accordionWrap.children().eq(1).slideToggle(300);  
  accordionWrap.children().eq(0).toggleClass("accordion-no-bar");
  accordionWrap.siblings().find(".accordion-header").removeClass("accordion-gold");
  accordionWrap.siblings().find(".accordion-header i").removeClass("rotate-fa");
  accordionWrap.find(".accordion-header").toggleClass("accordion-gold");
  accordionWrap.find(".fa").toggleClass("rotate-fa");
})

＆＃13;

或者，您可以在click上注册accordion-header处理程序，并将$(this)选择器替换为accordion-wrap父

这是alternative pen

这是一段代码：

＆＃13;

$(".accordion-header").on("click", function (event) {
  let accordionWrap = $(event.target.parentElement.parentElement);
  accordionWrap.children().eq(1).slideToggle(300);  
  accordionWrap.children().eq(0).toggleClass("accordion-no-bar");
  accordionWrap.siblings().find(".accordion-header").removeClass("accordion-gold");
  accordionWrap.siblings().find(".accordion-header i").removeClass("rotate-fa");
  accordionWrap.find(".accordion-header").toggleClass("accordion-gold");
  accordionWrap.find(".fa").toggleClass("rotate-fa");
});

＆＃13;

当点击发生在其内部的文本上时，防止手风琴关闭

2 个答案: