Bootstrap 游览无法处理下拉菜单

Question

我正在使用 http://bootstraptour.com/ 浏览应用程序中的功能。

我正在尝试让导览与本机 bootstrap 下拉菜单一起使用。下拉菜单内容是隐藏的，当导览到达该步骤时，我在下拉菜单中添加 CSS class "open"，当您单击它时会发生这种情况。（标准 bootstrap 行为）但它打不开。

我已经尝试了所有方法，试图通过首先显示它来使导览附加到隐藏元素，但似乎没有任何效果。我创建了一个 fiddle 以便您可以看到我要解释的内容。

    // 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

如果您想将游览功能添加到您的 boostrap 下拉列表中：

删除 onHidden: function() { ... 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>

Bootstrap 游览无法处理下拉菜单

Bootstrap Tour Unable to work on dropdown

twitter-bootstrap

bootstrap-tour