zed*_*zed 7 jquery twitter-bootstrap bootstrap-4
我正在使用Bootstrap v4.0.0
我已经包含了必要的JavaScript文件(jQuery,popper和Bootstrap)以及必要的CSS文件.
这是HTML:
<body data-spy="scroll" data-target="#my-navbar-collapse" data-offset="100">
<!-- ... -->
<div class="collapse navbar-collapse" id="my-navbar-collapse">
<ul class="nav navbar-nav" role="tablist">
<li class="nav-item">
<a class="nav-link" href="#one">One</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#two">Two</a>
</li>
</ul>
</div>
<!-- ... -->
<section id="one">
Content.
</section>
<!-- ... -->
<section id="two">
More content.
</section>
<!-- ... -->
<script>
$(function() {
// As per the official docs:
// https://getbootstrap.com/docs/4.0/components/scrollspy/#events
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function() {
console.log("This event is not firing...");
});
});
</script>
</body>
滚动时菜单项会正确突出显示,但JavaScript事件activate.bs.scrollspy不会触发.
我也尝试将事件挂钩到navbar自身,但它也不会触发:
$('#my-navbar-collapse').on('activate.bs.scrollspy', function () {
console.log("Not firing either...");
})
我曾经在Bootstrap 3上使用这个代码并且运行得很好.
有什么想法吗？
谢谢.
Zim*_*Zim 17
由于某种原因在这里解释,当你使用bodyspy元素时,事件会被激活window.
$(window).on('activate.bs.scrollspy', function () {
console.log("This event is not firing...");
});
演示:https://www.codeply.com/go/aN4tfy0zU0
编辑
目标元素可以在第二个事件参数中获得:
$(window).on('activate.bs.scrollspy', function (e,obj) {
console.log(obj.relatedTarget);
});
| 归档时间： |
|
| 查看次数： |
2283 次 |
| 最近记录： |