Bootstrap tour 突出显示整个下拉列表

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

使用 element: "#dropdown" 代替 element: "#dropdownMenu1" 并修复弹出框位置...

Answer 2

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

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

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 tour 突出显示整个下拉列表

Bootstrap tour Highlight entire dropdown

javascript

jquery

twitter-bootstrap

bootstrap-tour