如何在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>