点击单个社交分享图标时所有图标同时触发该如何解决

每当点击任意一个社交分享图标时，其余所有社交图标都会被触发，截图如下：

问题原因 #

你当前的代码存在两个核心问题：

• 选择器范围过大：$('ul')会选中页面内所有ul元素，点击.toggle时所有ul都会同步切换active类，导致多组分享组件同时被触发
• 未阻止子元素事件冒泡：点击社交图标对应的<a>标签时，点击事件会向上冒泡到父容器，同时<a>标签默认href为#会触发页首跳转

修复方案 #

替换原JS代码为以下内容即可：

$(document).ready(function() {
  // 仅操作当前点击的toggle元素及其相邻的ul，避免影响其他元素
  $('.toggle').click(function(){
    $(this).toggleClass('active')
    $(this).siblings('ul').toggleClass('active')
  })
  // 阻止社交图标点击事件冒泡和默认跳转
  $('.share a').click(function(e) {
    e.stopPropagation()
    e.preventDefault()
    // 此处可添加对应平台的分享逻辑
    const platformId = $(this).attr('id')
    console.log('触发' + platformId.replace('-icon-hover', '') + '分享操作')
  })
})

如果需要保留点击图标跳转原有链接的逻辑，删除e.preventDefault()这一行即可。

原始代码参考 #

HTML代码

<div class="share">
  <div class="toggle"></div>
  <ul>
    <li><a id="facebook-icon-hover"  href="#">  <i class="facebook-icon-hover fab fa-facebook"></i></a></li>
    <li><a id="instagram-icon-hover" href="#">  <i class="instagram-icon-hover  fab fa-instagram"></i></a></li>
    <li><a id="youtube-icon-hover"   href="#">  <i class="youtube-icon-hover  fab fa-youtube"></i></a></li>
    <li><a id="whatsapp-icon-hover"  href="#">  <i class="whatsapp-icon-hover  fab fa-whatsapp"></i></a></li>
    <li><a id="pinterest-icon-hover" href="#">  <i class="pinterest-icon-hover  fab fa-pinterest"></i></a></li>
    <li><a id="snapchat-icon-hover " href="#">  <i class="snapchat-icon-hover  fab fa-snapchat"></i></a></li>
    <li><a id="tumblr-icon-hover"    href="#">  <i class="tumblr-icon-hover  fab fa-tumblr"></i></a></li>
    <li><a id="twitter-icon-hover"   href="#">  <i class="twitter-icon-hover  fab fa-twitter"></i></a></li>
  </ul>
</div>

原始JS代码

$(document).ready(function() {
  $('.toggle').click(function(){
    $('.toggle').toggleClass('active')
    $('ul').toggleClass('active')
  })
})    

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