Question

我有一个可以扩展点击的手风琴，但我还想要一个悬停的弹出窗口。

最初，我有以下代码，在一个元素上调用了两个“数据切换”。这打破了弹出窗口。

<div class="panel panel-default">
  <div class="panel-heading"  >
    <h4 class="panel-title">
      <a data-toggle="collapse" data-parent="#parent-id" href="#collapse-id" data-container="body"  data-placement="top" data-content="data to be shown on popover" class="popoverClass"> 
          CLICK
        </a>
    </h4>
  </div>
</div>

的.js

$('.popoverClass').popover({ trigger: "hover" });

接下来我尝试将父div命名为popover元素，但这会破坏手风琴和弹出窗口

<div class="panel panel-default popoverClass" data-container="body"  data-toggle="popover" data-placement="top" data-content="data to be shown on popover">
  <div class="panel-heading"  >
    <h4 class="panel-title">
      <a data-toggle="collapse" data-parent="#parent-id" href="#collapse-id"> 
          CLICK
        </a>
    </h4>
  </div>
</div>

看起来Bootstrap有一个错误正在被修复https://github.com/twbs/bootstrap/issues/7011，一些回复建议使用SPAN或DIV作为单独的元素来识别popover，但我似乎无法让它正常运行。

这是一个带有功能手风琴的JFiddle

http://jsfiddle.net/L38U8/

这是一个带有功能性弹出窗口的JFiddle

http://jsfiddle.net/37KQt/

这是JFiddle用手风琴

工作popover

http://jsfiddle.net/csaVg/

任何人都可以在我的代码中看到错误吗？

有什么建议吗？

每个元素引导多个数据api

0 个答案: