简体   繁体   English

在离线使用引导程序(通过 npm)时,我是否必须为 slideToggle animation 创建和使用我自己的 jquery 脚本?

[英]Do I have to create and use my own jquery script for slideToggle animation when using bootstrap offline (via npm)?

I just learned to create a website using bootstrap.我刚刚学会了使用引导程序创建一个网站。 I created a project using bootstrap for the appearance of the website.我使用引导程序创建了一个项目来显示网站的外观。 Initially, I used an online bootstrap to make the website display work optimally.最初,我使用在线引导程序使网站显示效果最佳。 I made a navbar with the hamburger menu, and when I clicked it the result was like this:我用汉堡菜单做了一个导航栏,当我点击它时,结果是这样的:

动画汉堡菜单

There is a smooth animation when I click the hamburger menu.当我点击汉堡菜单时,有一个平滑的 animation。

Then I tested the appearance of my website using offline bootstrap, and the results were like this:然后我使用离线引导程序测试了我的网站的外观,结果是这样的:

非动画汉堡菜单

There is no animation when I click the hamburger menu.单击汉堡菜单时没有 animation。

When I try to use the jquery slideToggle() script in html (I put it in html just for testing), the animation will appear like I am using an online bootstrap. When I try to use the jquery slideToggle() script in html (I put it in html just for testing), the animation will appear like I am using an online bootstrap.

<script>
$(document).ready(function () {
     $("#hamburgerMenu").click(function () {
           $("#navbarTogglerDemo02").slideToggle();
     });

});
</script>

Question: do I really have to implement the jquery slideToggle() script above into my javascript file or is there another way so I don't have to put the script?问题:我真的必须将上面的 jquery slideToggle() 脚本实现到我的 javascript 文件中,还是有其他方法所以我不必放置脚本? Because in online bootstrap I don't need to write the above script in my javascript file.因为在在线引导程序中,我不需要在我的 javascript 文件中编写上述脚本。

There's no reason that I can think of that the offline bootstrap should behave any differently than the online one.我没有理由认为离线引导程序的行为应该与在线引导程序有任何不同。

I'd be curious on where did you source the two files and i'd do a comparison between the two.我很好奇您从哪里获取这两个文件,我会在两者之间进行比较。 If it's working online, all you're doing is getting that code and minifying it for local use like so:如果它可以在线运行,那么您所做的就是获取该代码并将其缩小以供本地使用,如下所示:

<link rel="stylesheet" href="css/bootstrap.min.css">

Solved, The question has been answered.已解决,问题已得到解答。 although I can't solve the error.虽然我无法解决错误。

It turns out that the online bootstrap version that I am using is version 4.0.0 (I adjusted jquery and popper.js according to the documentation) and the offline version is 4.5.2.原来我使用的在线bootstrap版本是4.0.0版本(我根据文档调整了jquery和popper.js),离线版本是4.5.2。 When I tried to use online bootstrap version 4.5.2 (with jquery and popper.js which have also been adjusted), the animation also didn't work.当我尝试使用在线引导程序 4.5.2 版(jquery 和 popper.js 也已调整)时,animation 也不起作用。 Once I tried bootstrap version 4.0.0 offline, the animation ran normally.一旦我尝试离线引导版本 4.0.0,animation 运行正常。

I'm not sure with this answer.我不确定这个答案。 There may be a bug in the bootstrap.引导程序中可能存在错误。 But when I tried various methods, the result was same但是当我尝试了各种方法时,结果是一样的

Result:结果:

  • Bootstrap 4.0.0: animation in toggle both offline and online goes as desired (there is a smooth animation) Bootstrap 4.0.0:animation 在切换离线和在线时按需要进行(有流畅的动画)
  • Bootstrap 4.5.2: animation in toggle both offline and online does not work as desired (no animation) Bootstrap 4.5.2:animation 在离线和在线切换中都无法正常工作(无动画)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM