是否可以根据屏幕宽度更改 Bootstrap 弹出窗口的操作？

Question

我问这个问题 关于根据屏幕大小更改引导程序弹出窗口的位置。

答案很好 - 但我现在也想更改弹出窗口的操作（因此在移动设备上单击即可）以及位置，并且我在重构代码时遇到了困难。这就是我所拥有的：

$(document).ready(function(){
    $('#my_list li').popover({
        placement: wheretoplace
    });
});

function wheretoplace(){
    var width = window.innerWidth;
    if (width<500) return 'below';
    return 'left';
}

如何修改 wheretoplace 函数以返回两个内容：placement 值和 trigger 值？我已经在 jsFiddle 中找到了现有的东西。

编辑 - 我修改了上面的 jsFiddle 以显示完整的解决方案，在下面的 @James 答案中添加了 click 事件。

Answer 1

如果您尝试从函数返回两个值，请尝试将它们分配为对象的属性，然后返回该对象。

例如。

function wheretoplace(){

    var data = {};    

    var width = window.innerWidth;

    if (width<500)
    { 
        data.placement = 'below';
    }
    else
    {
        data.placement = 'left';
    }

    data.trigger = "myEvent";

    return data;

}

然后在调用 wheretoplace 的函数中：

$(document).ready(function(){
    $('#my_list li').popover({
        placement: wheretoplace().placement,
        trigger: wheretoplace().trigger
    });
});

这是您想要做的吗？

编辑：响应下面的评论：

与 jsFiddle 演示 一样，

通过将触发器分配为“手动”文档准备就绪后，您就可以在点击处理程序中调用 $(element).popover("toggle") 来切换弹出窗口的外观。