WordPress循环中JS/jQuery实现Div显示隐藏的问题求助

在WordPress循环中实现社交分享模块时，点击分享按钮会触发所有帖子的分享图标同时显示，以下是针对三个问题的完整解决代码和思路：

完整解决代码 #

HTML（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="loop-container">
  <div class="loop-item">
    <h4>Item Title Loop 1</h4>
    <div class="social-share-box">
      <div class="share-btn">Click here share:</div>
      <div class="share-icon">
        <a>F</a>
        <a>T</a>
        <a>P</a>
      </div>
    </div>
  </div>

  <div class="loop-item">
    <h4>Item Title Loop 2</h4>
    <div class="social-share-box">
      <div class="share-btn">Click here share:</div>
      <div class="share-icon">
        <a>F</a>
        <a>T</a>
        <a>P</a>
      </div>
    </div>
  </div>
</div>

CSS（无需修改） #

body {
  font-family: Arial;
  font-size: 16px;
}

.loop-container {
  display: flex;
}

.loop-item {
  width: 200px;
  margin: 10px;
  padding: 15px;
  border: 1px solid #dedede;
}

.loop-item h4 {
  margin-top: 0;
}

.social-share-box {
  font-size: 14px;
}

.social-share-box .share-btn {
  cursor: pointer;
  margin-bottom: 8px;
}

.social-share-box .share-icon {
  display: none;
}

.social-share-box .share-icon.active {
  display: block;
}

.social-share-box .share-icon a {
  font-size: 12px;
  width: 14px;
  height: 14px;
  border: 1px solid #dedede;
  border-radius: 90px;
  display: inline-block;
  text-align: center;
  padding: 2px;
}

修改后的JS代码 #

jQuery(document).ready(function() {
  // 点击分享按钮
  $('.loop-item .share-btn').click(function(e) {
    e.stopPropagation(); // 阻止事件冒泡，避免触发外部点击逻辑
    var currentIcon = $(this).closest('.social-share-box').find('.share-icon');
    
    // 先隐藏其他已激活的分享图标
    $('.share-icon.active').not(currentIcon).removeClass('active');
    
    // 切换当前图标的显示状态
    currentIcon.toggleClass('active');
  });

  // 点击分享图标区域时阻止冒泡
  $('.share-icon').click(function(e) {
    e.stopPropagation();
  });

  // 点击页面外部隐藏所有分享图标
  $(document).click(function() {
    $('.share-icon.active').removeClass('active');
  });
});

问题解答 #

1. 仅让被点击帖子的社交图标显示 #

原代码直接选中所有.loop-item .share-icon执行切换，导致所有图标同时变化。修改后通过$(this).closest('.social-share-box').find('.share-icon')精准定位到当前点击按钮所在帖子内的分享图标，只对该元素进行状态切换。

2. 点击其他按钮时隐藏已激活的图标 #

每次点击新按钮前，先移除所有.share-icon的.active类（排除当前要操作的图标），再切换当前图标的状态，确保同一时间只有一个分享图标处于显示状态。

3. 点击区域外部时隐藏已激活的图标 #

监听document的点击事件，判断点击目标不属于分享按钮或图标区域时，移除所有.share-icon的.active类。同时给分享按钮和图标添加e.stopPropagation()，避免自身点击触发外部隐藏逻辑。

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