ブートストラップ画像のリンクが崩壊しない

Question

<div class="container text-center"> 
    <h2>THE BAND</h2> 
    <p>This is real music</p> 
    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah </p> 
    <br> 
    <div class="row"> 
    <div class="col-md-4"> 
     <h3><strong>Harry Potter</strong></h3> 
     <br> 
     <a href="#demo1" data-toggle: "collapse"> 
     <img src="../images/hp/daniel-radcliffe-robin-geeks-and-cleats.jpg" class="img-responsive img-circle"> 
     </a> 
     <div id="demo1" class="collapse"> 
     <p>Lead singer</p> 
     <p>Unfailingly kind</p> 
     <p>Pormotes marijuana usage</p> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <h3><strong>Hermione Granger</strong></h3> 
     <br> 
     <a href="#demo2" data-toggle: "collapse"> 
     <img src="../images/hp/bling-ring-emma-watson-tongue-6-new.jpg" class="img-responsive img-circle"> 
     </a> 
     <div id="demo2" class="collapse"> 
     <p>Drummer</p> 
     <p>"Its Levi-oh-saa"</p> 
     <p>10000 points to Gryffindor</p> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <h3><strong>Ron Weasley</strong></h3> 
     <br> 
     <a href="#demo3" data-toggle: "collapse"> 
     <img src="../images/hp/tumblr_naudtjccYH1r81hh2o2_1280.jpg" class="img-responsive img-circle"> 
     </a> 
     <div id="demo3" class="collapse"> 
     <p>Kinda useless</p> 
     <p>Afraid of spiders</p> 
     <p>Uhm</p> 
     </div> 
    </div> 
    </div> 
</div> 

画像をクリックすると折りたたみ機能が動作しません。私は ".in"クラスを使用するとテキストを見ることができます。

ユーザーが画像をクリックすると、画像の下にテキストが表示されます。私はこの問題が何であるか理解できません。

Answer 1

data-toggle:"collapse"からdata-toggle="collapse"に変更するだけです。 Collapse.js

実施例を参照してください：

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

 
<div class="container text-center"> 
 
    <h2>THE BAND</h2> 
 
    <p>This is real music</p> 
 
    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah</p> 
 

 
    <br> 
 

 
    <div class="row"> 
 

 
    <div class="col-md-4"> 
 
     <h3><strong>Harry Potter</strong></h3> 
 
     <br> 
 
     <a href="#demo1" data-toggle="collapse"> 
 
     <img src="http://placehold.it/350x150" class="img-responsive img-circle"> 
 
     </a> 
 
     <div id="demo1" class="collapse"> 
 
     <p>Lead singer</p> 
 
     <p>Unfailingly kind</p> 
 
     <p>Pormotes marijuana usage</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4"> 
 
     <h3><strong>Hermione Granger</strong></h3> 
 
     <br> 
 
     <a href="#demo2" data-toggle="collapse"> 
 
     <img src="http://placehold.it/350x150" class="img-responsive img-circle"> 
 
     </a> 
 
     <div id="demo2" class="collapse"> 
 
     <p>Drummer</p> 
 
     <p>"Its Levi-oh-saa"</p> 
 
     <p>10000 points to Gryffindor</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4"> 
 
     <h3><strong>Ron Weasley</strong></h3> 
 
     <br> 
 
     <a href="#demo3" data-toggle="collapse"> 
 
     <img src="http://placehold.it/350x150" class="img-responsive img-circle"> 
 
     </a> 
 
     <div id="demo3" class="collapse"> 
 
     <p>Kinda useless</p> 
 
     <p>Afraid of spiders</p> 
 
     <p>Uhm</p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>