如何在bootstrap中正確使用div中的摺疊按鈕？

Question

我打算爲我的報價容器製作摺疊按鈕，但是當我點擊它時，在第一次點擊時沒有任何反應，但是當我再次點擊時，整個div消失了？我想我在這裏正確地遵循樣本？ getbootstrap

同樣在我的小提琴中我的摺疊按鈕減號（ - ）不起作用。但在我的谷歌Chrome瀏覽器可以嗎？當我崩潰的時候，當它崩潰的時候，我可以換成另一個fontawesome圖標嗎？崩潰/隱藏時減號變爲正值？ 這是我的代碼和JS小提琴： JSFIDDLE

HTML

<div class="quote-box" id="collapse-quote"> 
    <div class="text"> 
    asdasd 
    </div> 

    <div class="buttons"> 

    <button class="button" id="twitter-button"><a title="Tweet this quote!" target="_blank"> tweet 
     <i class="fa fa-twitter"></i> 
    </a></button> 

    <button class="button" id="facebook-button"><a title="Share this quote!" target="_blank">share 
     <i class="fa fa-facebook"></i> 
    </a></button> 

    <button class="button" id="close-open" type="button" data-toggle="collapse" data-target="#collapse-quote" aria-expanded="false" aria-controls="collapse-quote"> 
     <i class="fa fa-minus"></i> 
    </button> 
    </div> 

</div> 

SCSS

.quote-box { 
    text-align: center; 
    position: relative; 
    border-radius: 4.5px; 
    border: solid black 1px; 
    display: table; 
    width: 50%; 
    height: 500px; 
    padding: 10%; 
    margin: 10% auto auto auto; 
    /* center the box */ 
} 

.quote-box .buttons { 
    top: 0; 
    /* align to top */ 
    left: 0; 
    width: 100%; 
    position: absolute; 
    /* out of the document flow and you can move*/ 
    height: 100%; 
    text-align: left; 
    padding: 1%; 
    box-sizing: border-box; 
} 


/* sample: uncomment if you want to align on right 
#twitter-button{ 
    float: right; 
} 
*/ 

#close-open { 
    /* float the collapse button to the right */ 
    float: right; 
} 

.fa-minus { 
    color: #11A5D6; 
    /* color for the button */ 
} 

我在做什麼錯？我一直在修理一個按鈕幾個小時。

Answer 1

它適用於我。我所做的只是刪除您的jquery-2.2.3.min.js參考，並將您的bootstrap.min.js更改爲使用https。

您還有其他問題，請查看Fiddle。

CSS

.quote-box { 
    text-align: center; 
    position: relative; 
    border-radius: 4.5px; 
    border: solid black 1px; 
    width: 50%; 
    padding: 10%; 
    margin: 10% auto auto auto; /* center the box */ 
} 

HTML，你缺失的DIV崩潰類，並且如果你還折​​疊所有按鈕怎麼是你應該要回呢？

<div class="quote-box"> 
    <div class="text collapse" id="collapse-quote"> 
     asdasd 
    </div> 

    <div class="buttons"> 

     <button class="button" id="twitter-button"><a title="Tweet this quote!" target="_blank"> tweet 
      <i class="fa fa-twitter"></i> 
     </a></button> 

     <button class="button" id="facebook-button"><a title="Share this quote!" target="_blank">share 
      <i class="fa fa-facebook"></i> 
     </a></button> 

     <button class="button" id="close-open" type="button" data-toggle="collapse" data-target="#collapse-quote" aria-expanded="false" aria-controls="collapse-quote"> 
      <i class="fa fa-minus"></i> 
     </button> 
    </div> 

</div>