自定义Javascript存在时Bootstrap导航栏折叠不起作用

我正在使用Imagelightbox和Bootstrap。我有一个折叠导航栏在我的手机查看，当下面的JavaScript存在的页面上，拨动按钮不起作用：自定义Javascript存在时Bootstrap导航栏折叠不起作用

$(function() { 
$('a[data-imagelightbox="ufo"]').imageLightbox({button: true, quitOnDocClick: true, navigation: false, arrows: true, overlay: true, caption: true}); 
$('a[data-imagelightbox="dreifeld"]').imageLightbox({button: true, quitOnDocClick: true, navigation: false, arrows: true, overlay: true, caption: true}); 
$('a[data-imagelightbox="delle"]').imageLightbox({button: true, quitOnDocClick: true, navigation: false, arrows: true, overlay: true, caption: true}); 
});

我的HTML看起来像这样：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<title></title> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<link href="css/custom.css" rel="stylesheet" type="text/css"> 

<link href="css/imagelightbox.css" rel="stylesheet" type="text/css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

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

</head>

我不假设我的导航栏有什么问题，因为它正在工作，当上面的JavaScript不存在时。

有人有一个想法是什么问题？

来源

2017-02-10 mspann

你可以在jsfiddle上重新创建相同的问题吗？ – ZimSystem

尝试test.spannmacher.com – mspann

切换按钮在那里工作。尝试清除缓存。 – user31782

我用的Imagelightbox开发者取得了联系。事实证明，这是一个插件本身的错误，它已经被修复。

来源

2017-02-13 07:29:33 mspann

我分析了test.spannmacher.com切换按钮不起作用。

这是由于bootstrap js包含在头部而不是身体中的事实。当引导js被执行时，它看不到任何html标签和任何带有数据切换的按钮标签，所以jquery选择器返回空数组。作为一个快速证明，如果您在控制台中复制整个https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js代码，导航将开始工作。

P.S.你也不应该在头部包含js文件（除了modernizer）。这将停止网页呈现，直到所有的js文件被加载。因此，在关闭身体标记之前放置它。

编辑：

请使用顺序完全相同：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<title></title> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<link href="css/custom.css" rel="stylesheet" type="text/css"> 

<link href="css/imagelightbox.css" rel="stylesheet" type="text/css"> 


</head> 
<body> 
<!-- html code goes here --> 
    <!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

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

来源

2017-02-10 12:54:59 user31782

谢谢！就是这样。我感谢你的努力！ – mspann

@mspann如果这解决了你的问题，你可以通过点击复选标记接受答案:) – user31782

其实，我很乐观，早。当我移动一切，但jquery下降到标签，它仍然是同样的问题。只要我将jquery移动到其余的位置，这意味着它是在OP中提到的脚本之后，然后菜单再次运行，但我的灯箱当然不起作用。 – mspann

自定义Javascript存在时Bootstrap导航栏折叠不起作用

回答

相关问题