2017-12-02 110 views
0

我正在使用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/

任何幫助,將不勝感激,

感謝

+0

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

回答

0

,你只需要設置通過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); 
      } 
     }); 
0

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

0

設置下拉按鈕的寬度與下拉菜單相同。 然後加入$(".dropdown-menu").css("z-index", "1101");

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