ブートストラップツアードロップダウン全体をハイライト表示

Question

http://bootstraptour.com/私のアプリケーションの機能を強調表示するために使用しています。

ツアーの1つのステップとして、ドロップダウンを強調したいと思います。

私は、ドロップダウンボタンをハイライトし、ドロップダウンを開き、次のコードを持っていますが、私はそれは、ドロップダウン・コンテンツ

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(); 
    } 
    } 
    ] 
}); 

にだけでなく、実際のドロップダウンを強調するためにどのように任意のアイデアを強調するために得ることができませんか？ドロップダウンを設定して任意の助けをいただければ幸いhttp://jsfiddle.net/nc1h3Lg2/4/

、

おかげ

Answer 1

追加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); 
      } 
     }); 

Answer 2

使用element: "#dropdown"element: "#dropdownMenu1"のinstedとポップオーバーの位置を固定...

Answer 3

：

は、私はそれのためにjsfiddleを作成しましたボタンをドロップダウンと同じ幅に設定します。 は、次に、あなたのコードは、この のようになります。あなただけのJavaScriptで z-indexを設定する必要があると .click使用 .trigger()を使用scroll down toパソコンへ転送代わりに、それは .clickよりも高速である $(".dropdown-menu").css("z-index", "1101");

へ

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