自舉圖像鏈接崩潰不起作用

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>