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

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Bootstrap Tour无法在下拉列表中工作

1 个答案: