首页 文章

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

提问于
浏览 次
0

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

这是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);    
});

有没有办法做到这一点，而不是重新整理听取手风琴 Headers 的点击（这是一个可能的解决方案，但我有兴趣知道它是否可能）？

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

jquery accordion

2 回答

  • 0

    请试试这个 .

    $('body').on('click', '.accordion-text', function() {  
return false;
 });
 
 $('body').on('click', '.accordion-wrap', function() {  
 $(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);  
 });

    <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>
    回复于
  • 0

    您必须使用事件委派并将事件侦听器设置为侦听层次结构中的标记"higher"，并使用来自子元素的特定css类的过滤器 . 在这种情况下，我们必须为来自 .accordion-text 的点击事件设置一个侦听器，并阻止它们关闭你的手风琴 . 我们还为来自包含 .accordion-header 类的元素的单击事件设置了侦听器 . 我还改进了一点事件处理函数 .

    这是pen .

    这是代码：

    $('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");
})

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

    这是alternative pen

    这是一段代码：

    $(".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");
});
    回复于

相关问题