Bootstrap 引导弹出窗口不适用于类，但适用于id

f5emj3cl 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(3)|浏览(233)

我一直在尝试让bootstrap popover插件在共享同一个类的多个元素上工作。现在它是大的灰色块级别的“更多信息”按钮。你可以在这里找到链接
以前，当它是一个单数id（如id="pop"）和以下JavaScript时，弹出窗口可以正常工作：

$(document).ready(function() {
   $('#pop').popover()
});

然而，当我将两个按钮（显示“更多信息”from id="pop"）更改为class="pop"并相应修改JavaScript时，弹出窗口在多个按钮上停止工作：

$(document).ready(function() {
   $('.pop').popover()
});

<a class="btn btn-block pop" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="top" data-toggle="popover" data-original-title="Popover on right">More Information</a></p>

是不是弹出窗口插件不能在同一个类的多个元素上工作？如果你看我提供的链接，没有控制台错误。

twitter-bootstrap

来源：https://stackoverflow.com/questions/14822677/bootstrap-popover-wont-work-with-a-class-but-will-work-with-id

3条答案

按热度按时间

sh7euo9m1#

您可以使用如下代码：

$('.pop').popover({
    html: true,
    content:mycontent,
    trigger: 'manual'
}).click(function(e) {
    $(this).popover('toggle');
    e.stopPropagation();
});

just check my jsfiddle

赞(0）回复(0）举报 2022-12-07

vmdwslir2#

在JavaScript中：

$(document).ready(function() {
  options = {
   placement: 'top',
   trigger : 'click'
  }
  $('[rel="popover"]').popover(options);
});

在Html中：

<p><a class="btn btn-block pop" rel="popover" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="Popover on right">More Information</a></p>

<p><a class="btn btn-block pop" rel="popover" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="Popover on right">More Information</a></p>

赞(0）回复(0）举报 2022-12-07

tzcvj98z3#

解决这个问题的方法是添加tabindex='0'，如果你打算在下次点击时关闭，并且如果你使用的是标签而不是标签阅读更多：https://getbootstrap.com/docs/4.0/components/popovers/#dismiss-on-next-click
您的标记将更改为

<a tabindex=0 class="btn btn-block pop" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="top" data-toggle="popover" data-original-title="Popover on right">More Information</a></p>

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 引导弹出窗口不适用于类，但适用于id

3条答案

相关问题

热门标签

最新问答