Question

我正在使用http://bootstraptour.com/突出显示我的应用程序的功能。

我想突出显示一个下拉列表及其内容，作为巡演中的一个步骤。

我有以下代码突出显示下拉按钮并打开下拉列表，但我无法突出显示下拉内容

var tour = new Tour({
    backdrop: true,
    debug: true,
    storage: false,
    steps: [{
        element: "#step1",
        title: "Settings",
        content: "Content of settings",
        placement: "right",
    }, {
        element: "#dropdownMenu1",
        title: "Title of my step",
        content: "Content of my step",
        placement: "right",
        onShown: function () {
            $("#dropdownMenu1").click();
        }
    }]
});

如何突出实际下拉列表的任何想法？。我创建了jsfiddle，任何帮助都将不胜感激。

Answer 1

将下拉按钮设置为与下拉列表相同的宽度。然后将$(".dropdown-menu").css("z-index", "1101");添加到

onShown: function(){
    $("#dropdownMenu1").click();
    $(".dropdown-menu").css("z-index", "1101");
}

Answer 2

使用element: "#dropdown" element: "#dropdownMenu1" m=Model(solver=GurobiSolver()) ... solve(m)并修复弹出位置...

Answer 3

你只需要通过javascript设置z-index而不要使用.click使用.trigger()而不是.click你的代码看起来应该像这样见Fiddle

$(document).ready(function () {
    // Instance the tour
    var tour = new Tour({
        backdrop: true,
        debug: true,
        storage: false,
        steps: [{
            element: "#step1",
            title: "Settings",
            content: "Content of settings",
            placement: "right",
        }, {
            element: "#dropdownMenu1",
            title: "Title of my step",
            content: "Content of my step",
            placement: "right",
            onShown: function () {
                $("#dropdownMenu1").trigger('click');
                $("#step4").css({
                    zIndex: 10000
                })
            }
        }]
    });

    if (tour.ended()) {
        tour.restart();
    } else {
        tour.init();
        tour.start(true);
    }
});

Bootstrap之旅突出显示整个下拉列表

3 个答案: