0

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

任何帮助，将不胜感激

谢谢

4

1 回答 1

2

如果您想将游览功能添加到您的 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>

于 2016-10-06T22:42:59.867 回答