10

我是 jquery 和 bootstrap 的新手，我无法让它们相互配合。我有一个包含引导下拉菜单和 jquery 滑块的页面。但是，我不能让他们两个同时工作。

Bootstrap 下拉菜单与此文件一起使用，并且滑块中断

<html lang="en">
<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="/js/slider_input.js"></script>
</head>

<body>
....
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script> 

</body
</html

通过像这样删除倒数第二行：

滑块工作，引导下拉菜单中断

<html lang="en">
<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="/js/slider_input.js"></script>
</head>

<body>
....

    <script src="/bootstrap/js/bootstrap.min.js"></script> 

</body
</html
4

3 回答 3

14

哦，是的，现在我明白了。您必须先加载实际的 jquery，否则 UI 也将无法工作。所以这应该是头

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
<script src="/js/slider_input.js"></script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

同样在 html5 中，你需要去掉 'type="text/javascript"'，就像引导程序一样，也是一致的，所以如果你有它，也将它添加到引导程序中，它与加载有关规则。

于 2013-06-04T20:28:48.013 回答
1

不确定，但您的 Bootstrap 版本似乎需要更新版本的 jQuery 才能正常运行，请尝试替换：

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

和

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

然后把它留在你的身体里。

让我知道接下来会发生什么。

注意： 永远不要加载两个 jQuery，它们会破坏并停止您的函数的工作，尤其是当您在页面上使用 ajax 时。

于 2013-06-04T19:43:07.173 回答
1

“jQuery 必须先出现，然后是 Popper.js，然后是我们的 [bootstrap] JavaScript 插件。” Bootstrap 4.x javascript 脚本命令：getbootstrap.com

于 2019-11-18T16:01:54.403 回答