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>