Question

我用jQuery创建了两个工具提示。我只希望显示单击的工具提示的内容，而不是同时单击两个工具提示的内容。这是因为我没有为单击的工具提示分配属性。我是jQuery的新手，因此我尝试仅在单击.tooltip时添加一个类，然后它显示所有隐藏的.tooltip-text。

我正在WordPress中进行此操作，因此将$替换为jQuery。当您在.tooltip-text之外单击时，我也想隐藏.tooltip，但也没有真正弄清楚，因此如果有人想提供帮助，将不胜感激。

我试图创建一个带有隐藏复选框和隐藏内容的工具提示，当用户单击工具提示时会显示该内容

这就是我现在要使用的一个工具提示的方式：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <i class="fas fa-info-circle tooltip">
  <span class="tooltiptext"> 
   Some content that gets shown when hovered or clicked
  </span>
 </i>
</p>

jQuery(function() {
  jQuery('.tooltip').click(function() {
    jQuery('.tooltiptext').addClass("tooltip-clicked");
  })
})

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
  visibility: visible;
  transition: all .25s;
}

.tooltiptext {
  position: absolute;
  z-index: 1;
  opacity: 0;
  visibility: collapse;
  transition: all .25s;
  pointer-events: none;
}

.tooltip-clicked {
  /*  When tooltip is clicked this style gets added to it */
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: all !important;
  cursor: auto !important;
}

Answer 1

（代表问题作者发布的答案）。

感谢@Rory McCrossan，现在它可以正常工作了。

现在是jQuery：

jQuery(function(){
 jQuery('.tooltip').click(function (){
  jQuery(this).find('.tooltiptext').addClass("tooltip-clicked");
 })
})

Answer 2

jQuery(function() {
jQuery('.tooltip').click(function() {
  $(this).children('.tooltiptext').addClass("tooltip-clicked");
})
jQuery('body').click(function(e) {
  if(e.target.className !="tooltiptext"){
     $(".tooltiptext").removeClass("tooltip-clicked");
  }
})
})

以上代码段将对您有用。您面临的问题是要在所有元素上添加活动类。此代码段的作用是仅将活动类添加到 clicked 元素的子级上。

仅显示单击元素的内容，在外部单击时全部隐藏

2 个答案: