时间戳

首页 > 解决方案 > Bootstrap 4：用于响应式导航栏的独立折叠 js

javascript - Bootstrap 4：用于响应式导航栏的独立折叠 js

问题描述

我用 Bootstrap 4.3.1 制作了一个小型网站，除了带有切换按钮的响应式导航栏的折叠插件外，不需要任何 javascript。

Bootstrap 4 不再有定制器，所以我被迫加载jquery-3.3.1.slim.min.js69 kiB 和bootstrap.min.js57 kiB，这导致下载 126 kiB Javascript 用于小屏幕上的交互式菜单切换按钮。

我能做些什么来减少我的用户的 javascript 下载大小吗？

标签： javascriptoptimizationbootstrap-4

解决方案

删除所有 jQuery 和 bootstrap javascript，并添加以下内容：

  <script type="text/javascript">
   const triggers = Array.from(document.querySelectorAll('[data-toggle="collapse"]'));
   triggers.forEach(elem => {
       elem.addEventListener('click', event => {
           const selector = elem.getAttribute('data-target');
           collapse(selector, 'toggle');
       });
   });

   const fnmap = {
       'toggle': 'toggle',
       'show': 'add',
       'hide': 'remove'
   };

   const collapse = (selector, cmd) => {
       const targets = Array.from(document.querySelectorAll(selector));
       targets.forEach(target => {
           target.classList[fnmap[cmd]]('show');
       });
   };
  </script>

灵感来自https://medium.com/dailyjs/mimicking-bootstraps-collapse-with-vanilla-javascript-b3bb389040e7

推荐阅读