Bootstrap NavbarカスタムJavascriptが存在するときに折りたたみが動作しない

ImagelightboxとBootstrapを使用しています。トグルボタンが動作しない、私は私のモバイルビューで折りたたまれたナビゲーションバーがあり、次のJavaScriptは、ページ上に存在する場合：Bootstrap Navbarカスタム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>

Iドン上記のJavaScriptが存在しないときに、動作しているようにNavbarに何か問題があると仮定します。

誰かが間違っていることを知っていますか？

出典

2017-02-10 mspann

jsfiddleで同じ問題を再現できますか？ – ZimSystem

try test.spannmacher.com – mspann

トグルボタンがそこで動作しています。キャッシュをクリアしてみてください。 – user31782

を私はImagelightboxの開発者と連絡を取っ。それはプラグイン自体のバグであったことが判明し、その後修正されています。

出典

2017-02-13 07:29:33 mspann

私はtest.spannmacher.comを分析しました。トグルボタンが機能していません。

これは、ブートストラップjsが本体にないヘッドに含まれているためです。ブートストラップjsが実行されると、htmlタグとデータトグル付きのボタンタグは表示されないので、jqueryセレクタは空の配列を返します。コンソール内で過去の全体のhttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.jsコードをコピーすると、ナビゲーションが機能し始めます。

P.S.また、ヘッド（現代化ツール以外）にjsファイルを含めないでください。これにより、すべてのjsファイルがロードされるまでWebページのレンダリングが停止されます。 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>

出典

2017-02-10 12:54:59 user31782

ありがとう！それはそれだった。私はあなたの努力に感謝します！ – mspann

@mspannそれが問題を解決した場合、チェックマークをクリックして回答を受け入れることができます:) – user31782

実際、私は早めに楽観的になっています。 jqueryを除いてすべてをタグに移動すると、それでも同じ問題が発生します。 jqueryを残りの部分に移動すると、つまりOPで記述されたスクリプトの後にあることを意味すると、メニューは再び機能しますが、もちろんライトボックスは機能しません。 – mspann

Bootstrap NavbarカスタムJavascriptが存在するときに折りたたみが動作しない

答えて

関連する問題