$（...）。sideNav不是函数

Question

我刚刚下载了mdbootstrap。按照我的网页上实现side-nav的说明进行操作时，尝试初始化时会出现以下错误：

  

未捕获的TypeError：$（...）。sideNav不是函数       在index.html：133）。

请帮助。我尝试重新排列文件顺序，但这似乎无济于事。

<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
  $(".button-collapse").sideNav();

  var sideNavScrollbar = document.querySelector('.custom-scrollbar');
  Ps.initialize(sideNavScrollbar);  
</script>

Answer 1

请注意，sideNav组件仅适用于专业用户。 也许您尝试使用mdbootstrap的“便宜”版本导入高级组件

Answer 2

您需要先加载jQuery。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
  $(".button-collapse").sideNav();

  var sideNavScrollbar = document.querySelector('.custom-scrollbar');
  Ps.initialize(sideNavScrollbar);  
</script>

并确保您在Web浏览器中刷新文件而不缓存。您可以通过在Chrome中点击Shitf + F5刷新它。

Answer 3

您需要先加载jQuery sideNav。这样做：

function App() {
  const {current: scrolling} = useRef({flag: false});
  const wheelHandler = (event) => {
     // I need to remove wheelHandler here
     if (scrolling.flag) {
         // Bail out
         return;
     }
     scrolling.flag = true;

     // ...other logic if any...

     setTimeout(() => {
       // I need to readd wheelHandler here
       scrolling.flag = false;
     }, 1000); // Assume that the transition ends after 1000ms
  };

  return (
    <div className="App" onWheel={wheelHandler} />
  );
}