Bootstrap Popover切换事件失效：点击仅显示无法隐藏

我帮你看看这个Popover的问题～你想要点击单词弹出解释、再次点击隐藏，但现在只能显示没法收起，对吧？咱们先拆解下原代码里的问题：

原代码里的核心问题 #

$(function() { 
  var p = $('p#paragraph'); 
  p.html(function(index, oldHtml) { 
    return oldHtml.replace(/\b(\w+?)\b/g, '<span id="word" >$1</span>') 
  }); 
  p.click(function(event) { 
    if (this.id != event.target.id && this.class != "#highlight-plugin") { 
      var word = event.target.innerHTML; 
      var translate = $(event.target).popover({ 
        trigger: "manual", 
        placement: "auto", 
        content: "B..." 
      }); 
    } 
  })
})

1. 重复ID问题：所有单词都被替换成<span id="word">，ID在页面中必须唯一，这会导致后续DOM操作混乱，应该改成class（比如class="word"）。
2. 缺少状态切换逻辑：你设置了trigger: "manual"，但每次点击都只是初始化新的Popover实例，完全没判断当前Popover是显示还是隐藏，自然没法收起。
3. 错误的类判断写法：this.class != "#highlight-plugin"是错误的，判断元素是否包含某个类应该用jQuery的hasClass()方法，而且类名本身不带#符号。
4. 事件冒泡干扰：点击span时事件会冒泡到父元素p，需要做更精准的目标判断。

修正后的代码 #

$(function() { 
  var p = $('p#paragraph'); 
  // 把span的id改成class，避免重复ID问题
  p.html(function(index, oldHtml) { 
    return oldHtml.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>') 
  }); 

  // 直接给.word绑定点击事件，比在父元素p上委托更精准
  p.on('click', '.word', function(event) {
    var $target = $(this);
    // 获取当前元素的Popover实例，判断是否可见
    var isPopoverVisible = $target.data('bs.popover')?.$tip.is(':visible');

    if (isPopoverVisible) {
      // 如果已显示，就隐藏Popover
      $target.popover('hide');
    } else {
      // 先隐藏其他可能显示的Popover（可选，避免多个弹窗同时存在）
      $('.word').popover('hide');
      // 初始化并显示当前Popover
      $target.popover({ 
        trigger: "manual", 
        placement: "auto", 
        content: `翻译内容：${$target.text()}`,
        container: 'body' // 可选：解决弹窗位置偏移问题
      }).popover('show');
    }

    // 阻止事件冒泡到父元素p，避免干扰
    event.stopPropagation();
  });

  // 可选：点击页面空白处关闭所有Popover，提升体验
  $(document).on('click', function(event) {
    if (!$(event.target).closest('.word, .popover').length) {
      $('.word').popover('hide');
    }
  });
})

关键改动说明 #

• 将所有单词span的ID改为class，保证DOM结构的正确性；
• 直接给.word绑定点击事件，无需在父元素中做复杂判断；
• 增加状态判断逻辑：通过$target.data('bs.popover')获取已初始化的Popover实例，判断其可见状态，实现显示/隐藏的切换；
• 新增全局关闭逻辑（可选）：点击页面空白处自动关闭所有弹窗，优化用户体验；
• 阻止事件冒泡，避免父元素的点击事件干扰当前操作。

这样修改后，点击单词就能正常弹出Popover，再次点击该单词就会收起啦～

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