如何在引导程序中正确制作 div 内的折叠按钮？

Question

我想为我的报价容器制作一个折叠按钮，但是当我单击它时，在第一次单击时，什么也没有发生，但是当我再次单击时，整个 div 消失了？我想我在这里正确地遵循了示例？ getbootstrap

在我的小提琴中，我的折叠按钮也不起作用。但是在我的 google 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>

css

.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>