Question

我使用jQuery清空div，然后将php页面加载到清空的div：

$("#main-container").empty();
$("#main-container").load("blog.php");

除了Bootstrap侧滚动导航菜单（包含在blog.php中）之外，一切都有效，它们在合并到单个静态HTML页面时按预期方式粘贴和滚动，但在使用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%;
}

我认为这可能是由原始页面/ DOM加载触发Bootstrap事件但在jQuery加载后没有被触发的结果。使用jQuery的加载方法将Bootstrap侧面导航菜单加载到页面后如何进行滚动/附加？

Answer 1

尝试添加此

$("#main-container").load("blog.php", function () {
  $('#myAffix').affix('checkPosition');
});

jQuery加载后，Bootstrap导航菜单不会滚动/粘贴

1 个答案: