私は理解できない問題に頭を悩ませており、見つけることができる同様の質問をすべて熟読しましたが、役に立ちませんでした。
Twitterブートストラップ3.3.7を使用したlaravel 5.3プロジェクトと、縮小されたjquery 3.1.1があります。
Jquery は CDN 経由で含まれています。
スクリプトのロードの順序は次のとおりで、 の最後にロードされる jquery を除いて、<footer>の後にロードされます。<body><head>
- Jクエリ
- app.js (laravel がこれをビルドし、ブートストラップが含まれています)
- jquery UI
- 私のカスタム javascript ファイル
基本的にこれが行うことは、2 つのボタンがあることです。簡単にするために、ここではそれらを A と B と呼びます。それぞれが div に関連付けられています。ページの読み込み時にすべてが非表示になります。A をクリックすると、div A が表示され、div B がまだ非表示になっていない場合は非表示になります。B をクリックすると、同じことを逆に実行します。
イライラする部分は？これは、Web アプリケーションの XAMPP ローカル バージョンでローカルに、期待どおりエラーなしで完全に機能します。しかし、ライブサーバーに移動すると、私が (思っていた) ほぼ同じ環境で、80% の方法で動作します。
Aをクリックすると、Aが表示されます。 (良い)
B をクリックすると、B が表示されます。 (良い)
A または B をクリックすると、ローカルのように反対側の div が非表示になりません。(悪い)
たとえば、A をクリックしてから B をクリックすると、B だけでなく A と B の両方の div が表示されるようになります。
関連する JavaScript のスニペットを次に示します。$('#complete-'+eid).collapse('hide');たとえば、ローカルでは機能するがサーバー上では機能しない行です。
`$('.incomplete-btn, .complete-btn').on('click', function(){
if($(this).hasClass('has-response')){
return;
}
var eid = $(this).attr('href').substr($(this).attr('href').length -1, 1);
if($(this).hasClass('incomplete-btn')){
if($(this).hasClass('lightgrey')){
$(this).removeClass('lightgrey');
$(this).addClass('orange')
}else{
$(this).addClass('lightgrey');
$(this).removeClass('orange');
}
$('#complete-'+eid).collapse('hide'); //hide complete-btn
$('#complete-btn-'+eid).addClass('lightgrey');
$('#complete-btn-'+eid).removeClass('orange');
}
if($(this).hasClass('complete-btn')){
if($(this).hasClass('lightgrey')){
$(this).removeClass('lightgrey');
$(this).addClass('blue')
}else{
$(this).addClass('lightgrey');
$(this).removeClass('blue');
}
$('#incomplete-'+eid).collapse('hide'); //hide incomplete-btn
$('#incomplete-btn-'+eid).addClass('lightgrey');
$('#incomplete-btn-'+eid).removeClass('blue');
}
});`
スクリプトを移動し、いつロードされるかを開発ツールで調べました。(私は当初、これは隠し div がスクリプトなどによってまだアクセスできないことに関係していると考えていました)。スクリプトのロードを延期したり、ページのロード時に div を非表示にしないで遊んだりしましたが、これで問題が変わることはありませんでした。
私は途方に暮れています、どんな洞察にも感謝します。
皆さんありがとう
編集：
私が作った例のフィドル: https://jsfiddle.net/3o0Lfw7n/18/
編集2:
簡略化されたコードはローカルでは機能しますが、サーバーでは機能しません。どのブラウザやデバイスでもコンソール エラーは発生しません。（折りたたむ/うまく開く、持続し続ける問題は、一方を開いたときに、もう一方が適切に閉じていないことです。
$(function() {
$('.incomplete-btn, .complete-btn').on('click', function(){
var clicked_btn = $(this);
var eid = clicked_btn.attr('href').substr(clicked_btn.attr('href').length -1, 1);
if(clicked_btn.hasClass('incomplete-btn')){
$('#complete-'+eid).collapse('hide');
}
if(clicked_btn.hasClass('complete-btn')){
$('#incomplete-'+eid).collapse('hide');
}
});
});