0

我正在使用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，任何帮助将不胜感激。

4

3 回答 3

1

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

onShown: function(){
    $("#dropdownMenu1").click();
    $(".dropdown-menu").css("z-index", "1101");
}
于 2017-12-02T21:50:03.533 回答
0

您只需要设置z-indexvia javascript 并且不要使用.clickuse.trigger()而是它比.click您的代码应该看起来像这样更快 See 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);
    }
});
于 2017-12-03T00:18:38.940 回答
0

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

于 2017-12-02T21:32:11.510 回答