ブートストラップ3 - アコーデオンがモーダル内にある場合、shown.bs.collapseまたはshown.bs.modalイベントは発生しません。

<div class="modal fade" id="myModal" role="dialog"> 
<div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 id="modal-title"> </h4> 
    </div> 
    <div class="modal-body"> 
     <div class="panel-group" id="accordion"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h4 class="panel-title"> 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1">Course Introduction 

          </a> 
          </h4> 
         </div> 

         <div id="collapse1" class="panel-collapse collapse in"> 
          <div class="panel-body"> 
          <p>abc</p> 
          </div> 
         </div> 
        </div> 

        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h4 class="panel-title"> 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse2">Description 

          </a> 
          </h4> 
         </div> 

         <div id="collapse2" class="panel-collapse collapse"> 
          <div class="panel-body"> 
          <p>Lorem </p> 
          </div> 
         </div> 
        </div> 

        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h4 class="panel-title"> 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse3">Goals 

          </a> 
          </h4> 
         </div> 

         <div id="collapse3" class="panel-collapse collapse"> 
          <div class="panel-body"> 
          <p>Lorem ipsum dolor sit </p> 
          </div> 
         </div> 
        </div> 

       </div> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
    </div> 
    </div></div> <!-- end of Modal -->

ここにはJavaScriptがあります。タブがアコーディオンでクリックされたときに折りたたみタブにクラスを追加するだけで、モーダルが閉じられてもevents.bs.collapseまたはshown.bs.modalイベントが発生していないときにすべてのアコーディオンを閉じたいとします。ブートストラップ3 - アコーデオンがモーダル内にある場合、shown.bs.collapseまたはshown.bs.modalイベントは発生しません。

$('#myModal').on('hidden.bs.modal', function() { 
$('.collapse').collapse('hide'); 
}); 
$('#myModal').on('shown.bs.modal', function() { 
$('#collapse1').collapse('show'); 
}); 

$('#accordion').find('.panel-default:has(".in")').addClass('panel-danger'); 

$('#accordion').on('show.bs.collapse', function (e) { 
$(e.target).closest('.panel-default').addClass(' panel-danger'); 
}).on('hide.bs.collapse', function (e) { 
$(e.target).closest('.panel-default').removeClass(' panel-danger'); 
})

出典

2017-01-18 Loveneet Saini

は最後に、私は問題を修正しました。 jqueryコードを

$（document）.ready（function（）{ ................ CODE ..........に入れました。 .. }）;

出典

2017-01-19 19:53:10

あなたのコードでイベントを使用するのを忘れました。 $('#myModal').on('hidden.bs.modal', function() {の代わりに$('#myModal').on('click','hidden.bs.modal', function() {にする必要があります。ここでは実施例である...

$('#myModal').on('click','hidden.bs.modal', function() { 
 
$('.collapse').collapse('hide'); 
 
}); 
 
$('#myModal').on('click','shown.bs.modal', function() { 
 
$('#collapse1').collapse('show'); 
 
}); 
 

 
$('#accordion').find('.panel-default:has(".in")').addClass('panel-danger'); 
 

 
$('#accordion').on('click','show.bs.collapse', function (e) { 
 
$(e.target).closest('.panel-default').addClass(' panel-danger'); 
 
}).on('hide.bs.collapse', function (e) { 
 
$(e.target).closest('.panel-default').removeClass(' panel-danger'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 
      <button class = "btn btn-file btn-md q_info" data-toggle="modal" data-target="#myModal">click</button> 
 
<div class="modal fade" id="myModal" role="dialog"> 
 
<div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 id="modal-title"> </h4> 
 
    </div> 
 
    <div class="modal-body"> 
 
     <div class="panel-group" id="accordion"> 
 
        <div class="panel panel-default"> 
 
         <div class="panel-heading"> 
 
          <h4 class="panel-title"> 
 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1">Course Introduction 
 

 
          </a> 
 
          </h4> 
 
         </div> 
 

 
         <div id="collapse1" class="panel-collapse collapse in"> 
 
          <div class="panel-body"> 
 
          <p>abc</p> 
 
          </div> 
 
         </div> 
 
        </div> 
 

 
        <div class="panel panel-default"> 
 
         <div class="panel-heading"> 
 
          <h4 class="panel-title"> 
 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse2">Description 
 

 
          </a> 
 
          </h4> 
 
         </div> 
 

 
         <div id="collapse2" class="panel-collapse collapse"> 
 
          <div class="panel-body"> 
 
          <p>Lorem </p> 
 
          </div> 
 
         </div> 
 
        </div> 
 

 
        <div class="panel panel-default"> 
 
         <div class="panel-heading"> 
 
          <h4 class="panel-title"> 
 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse3">Goals 
 

 
          </a> 
 
          </h4> 
 
         </div> 
 

 
         <div id="collapse3" class="panel-collapse collapse"> 
 
          <div class="panel-body"> 
 
          <p>Lorem ipsum dolor sit </p> 
 
          </div> 
 
         </div> 
 
        </div> 
 

 
       </div> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
    </div> 
 
    </div> 
 
    </div></div> <!-- end of Modal --> 
 
    </body>

出典

2017-01-18 17:57:45 neophyte

まだ動作しています。このコードでは、モーダルを閉じた後、モーダルを再びクリックすると同じ折りたたみタブが開いたままになります。目標をクリックしてタブを閉じると、次にモーダルをクリックしたときに、目標タブが開いたままになります。 –

ブートストラップ3 - アコーデオンがモーダル内にある場合、shown.bs.collapseまたはshown.bs.modalイベントは発生しません。

答えて

関連する問題