Question

我正在使用Imagelightbox和Bootstrap。我的移动视图中有一个折叠的导航栏，当页面上出现以下Javascript时，切换按钮不起作用：

$( 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不存在时，我不会认为我的导航栏有任何问题，因为它正常工作。

有人知道出了什么问题吗？

Answer 1

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

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

P.S。此外，您不应该在头部包含js文件（除了现代化器）。这将停止网页呈现，直到加载所有js文件。所以在关闭body标签之前放置htem。

修改：

请准确使用此订单：

<!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>

Answer 2

我与Imagelightbox的开发者联系。事实证明这是插件本身的一个错误，并且已经修复了。

Bootstrap Navbar折叠在自定义Javascript存在时无法正常工作

2 个答案: