Question

我使用的是Bootstrap3，特别是它的JS组件popover。

我想在点击元素时添加一个元素，弹出窗口显示并删除该类，再次单击它并删除弹出窗口。

这是我显示/隐藏popover时的代码：

$('body').popover({
    selector: '.clickMeEm',
    trigger: 'click',
    placement: 'right'
});

<span class="clickMeEm" data-toggle="popover" data-content="message here"></span>

现在，bootstrap提供了我想使用 shown.bs.popover 和 hidden.bs.popover

的事件处理程序

因为我在页面上有多个弹出窗口，显然我只需要将样式应用于弹出窗口旁边的元素。

$('.clickMeEm').next('.popover').on('shown.bs.popover', function () {
  $(this).addClass('clicked');
});

$('.clickMeEm').next('.popover').on('hidden.bs.popover', function () {
  $(this).removeClass('clicked');
});

因此，该类需要应用于单击的元素，而不是弹出窗口。弹出窗口在我的代码中运行良好。

出于某种原因，它无法正常工作。我错过了什么？

Answer 1

您使用的jQuery选择器错误。 .next('.popover')需要引用$(this)。

更改您的代码：

$('.clickMeEm').on('shown.bs.popover', function () {
  $(this).next('.popover').addClass('clicked');
});

$('.clickMeEm').on('hidden.bs.popover', function () {
  $(this).next('.popover').removeClass('clicked');
});

<强> Working Bootply

Answer 2

要向您的popover添加一个类，您可以将HTML传递给您的popover内容（通过data-content），并为其指定一个类或ID。

HTML：

<span class="clickMeEm" data-toggle="popover" data-content="<span id='message'>message here</span>">Click for popover</span>

在你的JS中添加html: true作为参数。

$('body').popover({
    selector: '.clickMeEm',
    trigger: 'click',
    placement: 'right',
    html: true
});

然后你可以触发事件并引用相关的id / class（在这个例子中，#message：

$('.clickMeEm').on('shown.bs.popover', function () {
  $('#message').closest('.popover').addClass('clicked'); //adds class on same element as `.popover`
});

$('.clickMeEm').on('hidden.bs.popover', function () {
  $('#message').closest('.popover').removeClass('clicked');
});

Bootply Demo

Answer 3

这里的完整功能示例显示并关闭多个弹出窗口，当您点击按钮外的某个位置时，只需复制并粘贴JS代码：

http://jsfiddle.net/7h7ptjzh/

$(function () {

    $('body').popover({
        selector: '.clickMeEm',
        trigger: 'click',
        placement: 'right'
    });

    $('.clickMeEm').on('shown.bs.popover', function () {
      $('.clicked').popover('hide');                  
      $(this).addClass('clicked');       
    });     

    $('.clickMeEm').on('hidden.bs.popover', function () {
      $(this).removeClass('clicked');
    });

    $('body').click(function (e) {
        if (!$(e.target).hasClass("clickMeEm"))
        {
            $('.clickMeEm').popover('hide');
        }       
    });

});

在popover上添加/删除样式

3 个答案:

Bootply Demo