javascript - Bootstrap 浏览突出显示整个下拉列表

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");
}