[英]Bootstrap 4: Standalone collapse js for responsive navbar
I made a small website with Bootstrap 4.3.1, and require no javascript for it except the collapse plugin for the responsive navbar with a toggler button. 我用Bootstrap 4.3.1制作了一个小网站,除了带有切换按钮的响应式导航栏的折叠插件外,不需要javascript。
There is no customizer anymore for Bootstrap 4, so I'm forced to load jquery-3.3.1.slim.min.js
with 69 kiB, and bootstrap.min.js
with 57 kiB, which results in a download of 126 kiB Javascript for an interactive menu toggle button on small screens. Bootstrap 4没有定制器了,所以我不得不加载带有69
jquery-3.3.1.slim.min.js
和带有57 jquery-3.3.1.slim.min.js
bootstrap.min.js
,这导致下载126 kiB Javascript用于小屏幕上的交互式菜单切换按钮。
Is there anything I can do to decrease the javascript download size for my users? 有什么我可以做的,以减少我的用户的JavaScript下载大小?
Remove all the jQuery and bootstrap javascript, and add this: 删除所有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>
Inspired by https://medium.com/dailyjs/mimicking-bootstraps-collapse-with-vanilla-javascript-b3bb389040e7 灵感来自https://medium.com/dailyjs/mimicking-bootstraps-collapse-with-vanilla-javascript-b3bb389040e7
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.