Bootstrap 导航菜单在 jQuery 加载后 scroll/affix 没有
Bootstrap nav menu does not scroll/affix after jQuery load
我正在使用 jQuery 清空 div,然后将 php 页面加载到清空的 div:
$("#main-container").empty();
$("#main-container").load("blog.php");
除 Bootstrap 侧边滚动导航菜单(包含在 blog.php 中)外,一切正常按照描述使用 JS 分离和加载。
HTML:
<div class="col-md-offset-10 col-md-2">
<ul class="nav nav-pills nav-stacked" id="navmenu-side" data-spy="affix" data-offset-top="400">
<h3>Categories</h3>
<li><a href="#section1">All</a></li>
<li><a href="#section2">Category 1</a></li>
<li><a href="#section3">Category 2</a></li>
<li><a href="#section3">Category 3</a></li>
</ul>
</div>
CSS:
#navmenu-side.affix {
position: fixed;
top: 200px;
width: 100%;
z-index: 10;
}
#navmenu-side.affix-bottom {
position: absolute;
width: 100%;
}
我认为这可能是 Bootstrap 事件由原始 page/DOM 加载触发但在 jQuery 加载后未触发的结果。使用 jQuery 的加载方法将 Bootstrap 侧边导航菜单加载到页面后,如何使它成为 scroll/affix?
尝试添加这个
$("#main-container").load("blog.php", function () {
$('#myAffix').affix('checkPosition');
});
我正在使用 jQuery 清空 div,然后将 php 页面加载到清空的 div:
$("#main-container").empty();
$("#main-container").load("blog.php");
除 Bootstrap 侧边滚动导航菜单(包含在 blog.php 中)外,一切正常按照描述使用 JS 分离和加载。
HTML:
<div class="col-md-offset-10 col-md-2">
<ul class="nav nav-pills nav-stacked" id="navmenu-side" data-spy="affix" data-offset-top="400">
<h3>Categories</h3>
<li><a href="#section1">All</a></li>
<li><a href="#section2">Category 1</a></li>
<li><a href="#section3">Category 2</a></li>
<li><a href="#section3">Category 3</a></li>
</ul>
</div>
CSS:
#navmenu-side.affix {
position: fixed;
top: 200px;
width: 100%;
z-index: 10;
}
#navmenu-side.affix-bottom {
position: absolute;
width: 100%;
}
我认为这可能是 Bootstrap 事件由原始 page/DOM 加载触发但在 jQuery 加载后未触发的结果。使用 jQuery 的加载方法将 Bootstrap 侧边导航菜单加载到页面后,如何使它成为 scroll/affix?
尝试添加这个
$("#main-container").load("blog.php", function () {
$('#myAffix').affix('checkPosition');
});