如何在 bootstrap 中正确制作 div 内的折叠按钮？

Question

我正在尝试为我的报价容器制作一个折叠按钮，但是当我点击它时，在第一次点击时没有任何反应，但是当我再次点击时，整个 div 消失了？我想我正确地遵循了这里的示例？ getbootstrap

我的 fiddle 折叠按钮中的减号 (-) 也不起作用。但是在我的 google chrome 浏览器中可以吗？是不是也可以在我崩溃的时候，崩溃的时候换个fontawesome的图标？当 collapse/hidden 时减号变为正号？这是我的代码和 js fiddle： 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 上的折叠 class，而且如果你折叠了所有按钮，你应该如何返回它们？

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

如何在 bootstrap 中正确制作 div 内的折叠按钮？

How to make collapse button inside div properly in bootstrap?

html

css

twitter-bootstrap-3

collapse