Elementor标签组件优化：点击外部区域隐藏标签内容

需求说明：

• 点击页面中除标签（.premium-tabs-nav-list-item）和对应内容区域（.premium-tabs-content-section）外的任意位置，关闭激活的内容区域，同时移除标签的激活样式类
• 保留标签原有切换功能，再次点击标签可重新显示对应内容
• 标签激活时会添加tab-current类（用于改变背景色），激活的内容区域会添加content-current类

实现代码 #

HTML结构

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div class="tabs">
  <div class="premium-tabs-nav-list-item">Tab 1</div>
  <div class="premium-tabs-nav-list-item">Tab 2</div>
  <div class="premium-tabs-nav-list-item">Tab 3</div>
</div>
<div class="content">
  <div class="premium-tabs-content-section">Content 1</div>
  <div class="premium-tabs-content-section">Content 2</div>
  <div class="premium-tabs-content-section">Content 3</div>
</div>

JavaScript逻辑

jQuery(document).ready(function() {
  jQuery(document).click(function(event) {
    // 点击区域不是标签时，移除所有标签的激活类
    if (!jQuery(event.target).closest('.premium-tabs-nav-list-item').length) {
      jQuery('.premium-tabs-nav-list-item').removeClass('tab-current');
    }
    // 点击区域不是内容区域时，移除所有内容区域的激活类
    if (!jQuery(event.target).closest('.premium-tabs-content-section').length) {
      jQuery('.premium-tabs-content-section').removeClass('content-current');
    }
  });
});

逻辑说明 #

通过监听document的全局点击事件，使用closest()方法判断点击目标是否属于标签或内容区域：

• 若点击位置不在标签范围内，移除所有标签的tab-current类
• 若点击位置不在内容区域范围内，移除所有内容区域的content-current类
• 该逻辑不会干扰标签原有点击切换功能，再次点击标签可重新激活对应内容

内容的提问来源于stack exchange，提问作者Nasir Kamal