带有动画的引导自定义下拉菜单[关闭]答案

【问题标题】：Bootstrap custom dropdown with animation [closed]带有动画的引导自定义下拉菜单[关闭]
【发布时间】：2017-08-03 11:37:33
【问题描述】：

有人知道如何使引导下拉菜单看起来像这样吗？

我的问题是自定义基本的下拉菜单使边框消失，并在打开时让底部的蓝线慢慢向下移动。

http://prntscr.com/g3u587

感谢您的回答。

【问题讨论】：

stackoverflow.com/a/39756773/8317974的可能重复
How to Make Dropdown arrow(caret icon bootstrap) change On Click?的可能重复
抱歉，没有找到。谢谢。但对我来说，重要的是这些答案中没有定义的底线
@slacker 在评论之前至少仔细阅读描述。
好的先生对不起。谢谢。

标签： javascript html css twitter-bootstrap

【解决方案1】：

你可以用 CSS 试试这样的东西

CSS

.dropdown-toggle{
  border:none;
  background-color: transparent;
  outline:0;
}
.dropdown-toggle:active{
  box-shadow:none;
}

.btn.dropdown-toggle:focus{
  outline:0;
}

.dropdown-toggle[aria-expanded="true"] .caret{
  transform:rotate(180deg);
  transition:all ease 0.5s;
}
.dropdown-toggle .caret{
  transition:all ease 0.5s;
}
.dropdown .dropdown-menu{
  height:0;
  padding:0;
  overflow:hidden;
  margin:0;
  display:block;
  border:none;
  box-shadow:2px 2px 2px rgba(33,150,243,0.2);
  border-bottom:1px solid #2196F3;
  transition:all ease 0.5s;
  border-radius:0px;
  padding-left:2px;
  padding-right:2px;
}
.dropdown.open > .dropdown-menu{
  height:auto;

}
.dropdown.open > .dropdown-menu > li a:hover{
  background-color: #2196F3;
  border-radius:5px;
  color:#fff;
}

HTML

<div class="dropdown">
  <button class="btn dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Link for reference

风格相应。

希望这有帮助..

【讨论】：

太棒了... CSS 技巧也有效。