如何让Shopify手风琴仅点击头部关闭，点击内部内容不关闭？

问题描述 #

我在Shopify上开发一个4面板手风琴组件，面板内包含链接和表单。目前遇到的问题是，点击表单输入框或交互元素时，手风琴面板会自动关闭，这是最后需要完善的功能点。

已实现代码 #

JavaScript代码 #

$(function() {
  // (Optional) Active an item if it has the class "is-active"  
  $(".accordion > .accordion-item.is-active").children(".accordion-panel").slideDown();

  $(".accordion > .accordion-item").click(function() {
    // Cancel the siblings
    $(this).siblings(".accordion-item").removeClass("is-active").children(".accordion-panel").slideUp();
    // Toggle the item
    $(this).toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out");
  });
});

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="accordion">
  <li class="accordion-item">
    <h3 class="accordion-thumb">{{ product.metafields.custom.first_accordion_title }}</h3>
    <p class="accordion-panel">{{ product.metafields.custom.first_accordion_description }}</p>
  </li>
  <li class="accordion-item">
    <h3 class="accordion-thumb">{{ product.metafields.custom.second_accordion_title }}</h3>
    <p class="accordion-panel">{{ product.metafields.custom.second_accordion_description }}</p>
  </li>
  <li class="accordion-item">
    <h3 class="accordion-thumb">{{ product.metafields.custom.third_accordion_title }}</h3>
    <p class="accordion-panel">{{ product.metafields.custom.third_accordion_description }}</p>
  </li>
  <li class="accordion-item">
    <h3 class="accordion-thumb">{{ product.metafields.custom.fourth_accordion_title }}</h3>
    <div class="accordion-panel">
      <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
    </div>
  </li>
</ul>

问题原因 #

当前代码将点击事件绑定在了整个.accordion-item元素上，当点击面板内的表单元素（如输入框、按钮）时，事件会向上冒泡到父元素.accordion-item，触发绑定的切换逻辑，导致面板被关闭。

解决方案 #

方案1：阻止面板内元素的事件冒泡 #

修改JavaScript代码，判断点击目标是否在面板区域内，若是则跳过切换逻辑：

$(function() {
  // 初始化激活的面板
  $(".accordion > .accordion-item.is-active").children(".accordion-panel").slideDown();

  $(".accordion > .accordion-item").click(function(e) {
    // 若点击的是面板内的元素，不执行切换操作
    if ($(e.target).closest(".accordion-panel").length) {
      return;
    }
    // 关闭其他兄弟面板
    $(this).siblings(".accordion-item").removeClass("is-active").children(".accordion-panel").slideUp();
    // 切换当前面板状态
    $(this).toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out");
  });
});

方案2：将点击事件绑定到标题元素 #

只让点击手风琴标题（.accordion-thumb）时触发面板切换，避免面板内交互触发关闭：

$(function() {
  // 初始化激活的面板
  $(".accordion > .accordion-item.is-active").children(".accordion-panel").slideDown();

  $(".accordion > .accordion-item .accordion-thumb").click(function() {
    var $item = $(this).parent(".accordion-item");
    // 关闭其他兄弟面板
    $item.siblings(".accordion-item").removeClass("is-active").children(".accordion-panel").slideUp();
    // 切换当前面板状态
    $item.toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out");
  });
});

内容的提问来源于stack exchange，提问作者Mike Gil