html - HTML 中的 float 按钮

Question

我正在尝试完成一个 float 导航栏，它总是只显示一个按钮，单击它会打开它下面的其余部分。我正在使用 bootstrap collapse 和 collapse show classes 。有了这个它应该像点击第一个按钮一样工作，它会显示其余按钮，当你再次点击它时它应该最小化并且不显示它下面的其他按钮。下面是它的代码。

#presentation {
  width: 480px;
  height: 120px;
  padding: 20px;
  margin: auto;
  background: #FFF;
  margin-top: 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: all 0.3s;
  border-radius: 3px;
}

#presentation:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  transition: all 0.3s;
  transform: translateZ(10px);
}

#floating-button {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: gray;
  position: fixed;
  bottom: 30px;
  right: 30px;
  cursor: pointer;
  box-shadow: 0px 2px 5px #666;
}

.plus {
  color: white;
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 55px;
  font-size: 38px;
  font-family: 'Roboto';
  font-weight: 300;
  animation: plus-out 0.3s;
  transition: all 0.3s;
}

#container-floating {
  position: fixed;
  width: 70px;
  height: 70px;
  bottom: 30px;
  right: 30px;
  z-index: 50px;
}

#container-floating:hover {
  height: 400px;
  width: 90px;
  padding: 30px;
}

#container-floating:hover .plus {
  animation: plus-in 0.15s linear;
  animation-fill-mode: forwards;
}

.edit {
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  display: block;
  right: 0;
  padding: 0;
  opacity: 0;
  margin: auto;
  line-height: 65px;
  transform: rotateZ(-70deg);
  transition: all 0.3s;
  animation: edit-out 0.3s;
}

#container-floating:hover .edit {
  animation: edit-in 0.2s;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}

@keyframes edit-in {
  from {
    opacity: 0;
    transform: rotateZ(-70deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}

@keyframes edit-out {
  from {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  to {
    opacity: 0;
    transform: rotateZ(-70deg);
  }
}

@keyframes plus-in {
  from {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  to {
    opacity: 0;
    transform: rotateZ(180deg);
  }
}

@keyframes plus-out {
  from {
    opacity: 0;
    transform: rotateZ(180deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}

.nds {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  position: fixed;
  z-index: 300;
  transform: scale(0);
  cursor: pointer;
}

.nd1 {
  background: gray;
  right: 40px;
  bottom: 120px;
 /*  animation-delay: 0.2s;
  animation: bounce-out-nds 0.3s linear;*/
  animation-fill-mode: forwards;
  } 

.nd3 {
  background: #3c80f6;
  right: 40px;
  bottom: 180px;
 /*  animation-delay: 0.15s;
  animation: bounce-out-nds 0.15s linear;*/
  animation-fill-mode: forwards; 
}

.nd4 {
  background: #ba68c8;
  right: 40px;
  bottom: 240px;
  /* animation-delay: 0.1s;
  animation: bounce-out-nds 0.1s linear;*/
  animation-fill-mode: forwards; 
}

.nd5 {
  background-image: url('https://lh3.googleusercontent.com/-X-aQXHatDQY/Uy86XLOyEdI/AAAAAAAAAF0/TBEZvkCnLVE/w140-h140-p/fb3a11ae-1fb4-4c31-b2b9-bf0cfa835c27');
  background-size: 100%;
  right: 40px;
  bottom: 300px;
  animation-delay: 0.08s;
  animation: bounce-out-nds 0.1s linear;
  animation-fill-mode: forwards;
}

@keyframes bounce-nds {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce-out-nds {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0);
  }
}

#container-floating:checked {  
  margin-top:0;
  opacity:1;
}

#container-floating:hover .nds {
  animation: bounce-nds 0.1s linear;
  animation-fill-mode: forwards;
}

#container-floating:hover .nd3 {
  animation-delay: 0.08s;
}

#container-floating:hover .nd4 {
  animation-delay: 0.15s;
}

#container-floating:hover .nd5 {
  animation-delay: 0.2s;
}

.letter {
  font-size: 23px;
  font-family: 'Roboto';
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  line-height: 40px;
}

.reminder {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  line-height: 40px;
}

.profile {
  border-radius: 50%;
  width: 40px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 20px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="container-floating">
<div id="floatingnav" class="collapse show">
    <div class="nd1 nds" data-toggle="tooltip" data-placement="left">
   <i id="locateplace" class="fa fa-search fa-stack-1x fa-inverse fa-2x" style="top:12px" ng-click="navMenuController($event);" role="button" tabindex="0"></i>
    </div>
    <div class="nd3 nds" data-toggle="tooltip" data-placement="left">
   <i id="locateplace" class="fa fa-search fa-stack-1x fa-inverse fa-2x" style="top:12px" ng-click="navMenuController($event);" role="button" tabindex="0"></i>
    </div>
    <div class="nd4 nds" data-toggle="tooltip" data-placement="left">
   <i id="locateplace" class="fa fa-search fa-stack-1x fa-inverse fa-2x" style="top:12px" ng-click="navMenuController($event);" role="button" tabindex="0"></i>
    </div>
    </div>
    <div id="floating-button" data-toggle="collapse" data-target="#floatingnav"  data-placement="left">
        <i id="legend" class="fa fa-tasks fa-stack-1x fa-inverse fa-2x" style="top:12px" role="button" tabindex="0"></i>
    </div>
</div>

Answer 1

Plunkr 链接 - https://plnkr.co/edit/QJgZM57mcvSGsFadsWGC?p=preview

<!DOCTYPE html>
<html>
  <head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  </head>

  <body>

  <div id="container-floating">

      <div id="floating-button" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#floatingnav"  data-placement="left">
        <i id="legend" class="fa fa-tasks fa-stack-1x fa-inverse fa-2x" style="top:12px" role="button" tabindex="0"></i>
    </div>
  <div id="floatingnav" class="collapse">
      <div class="nd1 nds" data-toggle="tooltip" data-placement="left">
     <i id="locateplace" class="fa fa-search fa-stack-1x fa-inverse fa-2x" style="top:12px" ng-click="navMenuController($event);" role="button" tabindex="0"></i>
      </div>
      <div class="nd3 nds" data-toggle="tooltip" data-placement="left">
     <i id="locateplace" class="fa fa-search fa-stack-1x fa-inverse fa-2x" style="top:12px" ng-click="navMenuController($event);" role="button" tabindex="0"></i>
      </div>
      <div class="nd4 nds" data-toggle="tooltip" data-placement="left">
     <i id="locateplace" class="fa fa-search fa-stack-1x fa-inverse fa-2x" style="top:12px" ng-click="navMenuController($event);" role="button" tabindex="0"></i>
      </div>
  </div>

  </div>
  </body>

</html>