Question

我正在尝试从另一个popover中的popover打开子菜单，但我无法做到这一点。这是示例代码

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul id="menu1" class="dropdown-menu">
    <li id="instance_1" data-toggle="popover2" style="cursor:pointer">Instance 1</li>
    <li id="instance_2">Instance 2</li>
</ul>
<ul id="menu2" class="dropdown-menu">
    <li id="instance_3">Instance 3</li>
    <li id="instance_4">Instance 4</li>
</ul>

<button type="button" class="btn btn-lg btn-Primary" 
        data-toggle="popover1">
  Click to toggle popover
</button>

<script>
        $('[data-toggle="popover1"]').popover({
            html: true,
            placement: 'auto right',
            container: 'body',
            trigger: 'click',
            template: '<div id="x" class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"><div class="data-content"></div></div></div>',
            content: function () {
                return $('#menu1').html();
            }
        });
        $('[data-toggle="popover2"]').popover({
            html: true,
            placement: 'auto right',
            container: 'body',
            trigger: 'click',
            template: '<div id="y" class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"><div class="data-content"></div></div></div>',
            content: function () {
                return $('#menu2').html();
            }
        });
</script>

有人可以帮助我理解如何做到这一点。在此先感谢!!

Answer 1

这里的问题是，当调用$('[data-toggle="popover2"]').popover()函数时，它只将侦听器添加到初始模板。当您基于该HTML填充第一个弹出窗口时，此侦听器不会继承。然后解决方案是在生成内容后（打开弹出窗口时）再次运行.popover()函数。这是一个使用第一个popover上的点击监听器来展示这个的代码：

https://codepen.io/zeiv/pen/BJmowO

上面的笔需要花些时间来完成所有细节（例如，关闭第一个弹出窗口不会关闭第二个），但希望你能得到这个想法。如果你需要帮助，我可以再努力了。

使用jquery的bootstrap popovers链

1 个答案: