Bootstrap Tour無法在下拉菜單上工作

Question

我正在使用http://bootstraptour.com/來查看應用程序中的功能。

我正在嘗試使用本機引導程序下拉列表工作。下拉內容是隱藏的，當遊覽到達那一步時，我在下拉菜單中添加CSS類「打開」，這是點擊它時發生的情況。 （標準引導行爲），但它不打開。

我嘗試了一切嘗試通過首先顯示它來隱藏元素的遊覽附加，但似乎沒有任何工作。我創建了一個小提琴，所以你可以看到我想要解釋的。

// Instance the tour 
var tour = new Tour({ 
    debug: true, 
    storage: false, 
    steps: [{ 
    element: "#step1", 
    title: "Settings", 
    content: "Content of settings", 
    placement: "bottom", 
    }, { 
    element: "#step2", 
    title: "Title of my step", 
    content: "Content of my step", 
    placement: "bottom", 

    }, { 
    element: "#step3", 
    title: "Title of my step", 
    content: "Content of my step", 
    placement: "bottom", 
    onHidden: function() { 
     $(".dropdown").addClass("open"); 
    }, 
    }, { 
    element: "#step4", 
    title: "Title of my step", 
    content: "Content of my step", 
    placement: "bottom", 
    onShow: function() { 
     $("#dropdown").addClass("open"); 
    }, 
    }] 
}); 

if (tour.ended()) { 
    tour.restart(); 
} else { 
    tour.init(); 
    tour.start(); 
} 

http://jsfiddle.net/rdoddXL/ku0fx7gq/2/

任何幫助，將不勝感激

感謝

Answer 1

如果你想參觀的功能添加到您的自舉下拉：

• 刪除onHidden：功能（ ）{... onShow ....
• 作爲動作添加Bootstrap Tour Methods到您的下拉選項

相反，如果你的問題是從旅遊行動程序打開您所遇到的問題的下拉列表：當你隱藏的第三個元素，並顯示您撥打的第四個元素同時打開和關閉下拉菜單（一個接一個）。

我建議你採取不同的行動。

onShow: function(tour) { 
    var cs = tour.getCurrentStep(); 
    if (cs == 2) { // if last tour step...open the dropdown 
     setTimeout(function() { 
      $("#dropdown").addClass("open"); 
     }, 100) 
    } 
} 

的片段（更新後的jsfiddle）：

事實上，如果問題在參觀結束時打開的下拉菜單中包括，您可以在旅遊創造的末尾添加

// 
 
// selecting an option of dropdown do the action.... 
 
// 
 
$('#step4').on('click', function(e) { 
 
    switch (e.target.textContent) { 
 
    case 'Action': 
 
     var cs = tour.getCurrentStep(); 
 
     if (cs == 3 || tour.ended()) { 
 
     tour.end(); 
 
     tour.restart(); 
 
     } else { 
 
     tour.next(); 
 
     } 
 
     break; 
 
    case 'Another action': 
 
     // do stuff 
 
     break; 
 
    } 
 
}) 
 
// Instance the tour 
 
var tour = new Tour({ 
 
    debug: true, 
 
    storage: false, 
 
    steps: [{ 
 
    element: "#step1", 
 
    title: "Settings", 
 
    content: "Content of settings", 
 
    placement: "bottom" 
 
    }, { 
 
    element: "#step2", 
 
    title: "Title of my step", 
 
    content: "Content of my step", 
 
    placement: "bottom" 
 

 
    }, { 
 
    element: "#step3", 
 
    title: "Title of my step", 
 
    content: "Content of my step", 
 
    placement: "bottom" 
 
    }, { 
 
    element: "#step4", 
 
    title: "Title of my step1111", 
 
    content: "Content of my step", 
 
    placement: "bottom" 
 
    }], 
 
    onShow: function(tour) { 
 
    var cs = tour.getCurrentStep(); 
 
    if (cs == 2) { 
 
     setTimeout(function() { 
 
     $("#dropdown").addClass("open"); 
 
     }, 100) 
 
    } 
 
    } 
 
}); 
 
if (tour.ended() == true) { 
 
    tour.restart(); 
 
} else { 
 
    tour.init(); 
 
    tour.start(); 
 
}

ul.nav { 
 
    border: 1px solid black; 
 
    margin-left: 5px; 
 
    display: inline-block; 
 
} 
 

 
#step1 { 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
    background-color: #eeeeee; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 150px; 
 
} 
 

 
#step2 { 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
    background-color: #666666; 
 
    position: absolute; 
 
    left: 210px; 
 
    top: 150px; 
 
} 
 

 
#step3 { 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
    background-color: #1c90f3; 
 
    position: absolute; 
 
    left: 420px; 
 
    top: 150px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.min.js"></script> 
 

 

 
<div id="dropdown" class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
     Dropdown 
 
     <span class="caret"></span> 
 
    </button> 
 
    <ul id="step4" class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li role="separator" class="divider"></li> 
 
     <li><a href="#">Separated link</a></li> 
 
    </ul> 
 
</div> 
 

 
<div id=step1></div> 
 
<div id=step2></div> 
 
<div id=step3></div>