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

Question

我询问了this 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 demo 一样

通过在文档就绪时将触发器指定为“手动”，您就可以在单击处理程序中调用$(element).popover("toggle")，这将切换弹出框的外观。