Bootstrap游览突出显示整个下拉菜单

我正在使用http://bootstraptour.com/突出显示我的应用程序的功能。Bootstrap游览突出显示整个下拉菜单

我想突出显示一个下拉列表,并将其内容作为巡视中的一个步骤。

我有下面的代码突出了下拉按钮,打开下拉,但我不能让它凸显下拉内容

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:http://jsfiddle.net/nc1h3Lg2/4/

任何帮助,将不胜感激,

感谢

回答:

,你只需要设置通过JavaScript z-index和DONOT使用.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);

}

});

回答:

使用element: "#dropdown" insted的的element: "#dropdownMenu1"和修复酥料饼的位置...

回答:

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

onShown: function(){ 

$("#dropdownMenu1").click();

$(".dropdown-menu").css("z-index", "1101");

}

以上是 Bootstrap游览突出显示整个下拉菜单 的全部内容, 来源链接: utcz.com/qa/258393.html

回到顶部