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遊覽突出顯示整個下拉菜單

回答

相關問題