代码之家 › 专栏 › 技术社区 › Naveen

使用jquery的引导式弹出链接

bootstrap-popover jquery

0

Naveen · 技术社区 · 7 年前

我试图在另一个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>

有人能帮我理解怎么做吗。提前谢谢!!

1 回复 | 直到 7 年前

1

0

Xavier 7 年前

这里的问题是 $('[data-toggle="popover2"]').popover() 函数,它只将侦听器添加到初始模板。当您基于HTML填充第一个popover时,此侦听器不会继续。然后,解决方案是运行 .popover() 作用 再一次 生成内容后(打开popover时)。下面是一个代码笔,通过第一个弹出窗口上的单击侦听器演示了这一点:

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

上面的画笔需要一些摆弄才能弄清楚所有的细节(例如,关闭第一个popover并不关闭第二个popover),但希望你能理解这个想法。如果你需要帮助,我可以再做一些。