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/

任何帮助，将不胜感激，

感谢

来源

2017-12-02 ThomasD

HTTP： //jsfiddle.net/buttflattery/nc1h3Lg2/5/ –

，你只需要设置通过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); 
      } 
     });

来源

2017-12-03 00:18:38

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

来源

2017-12-02 21:32:11 FBlade

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

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

来源

2017-12-02 21:50:03 XerXeX

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

回答

相关问题