Question

我有一个包含多个弹出窗口的页面，这些弹出窗口充当产品的附加信息。

当按预期运行时，用户应该能够点击弹出窗口，当他们点击另一个弹出窗口时，前一个弹出窗口将关闭。此功能已存在于我当前的代码中，但是，当用户执行此操作时，之前的弹出框的按钮没有重置切换状态。这意味着当用户点击第二个弹出窗口并尝试单击原始弹出窗口时，他们必须单击两次（一次将切换设置回原始状态，一次重新打开）。

我想知道在打开新的弹出窗口时如何重置所有其他弹出窗口的切换状态。

您可以在此处查看我当前的工作代码： http://codepen.io/kcarskadon/pen/BLJdkJ?editors=1010

这是我正在使用的当前jquery：

$(function () {
    $('[data-toggle="popover"]').popover({
        html: 'true'
    })
    $(document).on("click", ".popover .close" , function(){
        $(this).parents(".popover").popover('hide');
   });
    $(document).on('show.bs.popover', function(){
        $('.popover').not(this).hide()
   });
    $(document).on('hidden.bs.popover', function (e) {
        $(e.target).data("bs.popover").inState.click = false;
   });
});

感谢您的帮助！

Answer 1

您正在隐藏该项目，而不是使用弹出式隐藏功能，请尝试这样：

$(function () {
    $('[data-toggle="popover"]').popover({
        html: 'true'
    })
    $(document).on("click", ".popover .close" , function(){
        $(this).parents(".popover").popover('hide');
   });
    $(document).on('show.bs.popover', function(){
        $('.popover').not(this).popover('hide');
   });
    $(document).on('hidden.bs.popover', function (e) {
        $(e.target).data("bs.popover").inState.click = false;
   });
});

先进的弹道功能

1 个答案: