Question

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

同样在我的小提琴我的折叠按钮减号（ - ）不起作用。但在我的谷歌Chrome浏览器中它可以吗？是否有可能当我崩溃时，当它崩溃时我可以换成另一个奇特的图标？崩溃/隐藏时减号会变成加号吗？这是我的代码和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>

如何在bootstrap中正确地在div中创建折叠按钮？

1 个答案: