javascript - 如何在 Bootstrap 下拉标题中显示带有图标的所选项目？

Question

我想寻求帮助。我是 Bootstrap 和 JS 的新手。我尝试自己寻找解决方案，但还没有足够的知识来解决。我在下拉类中遇到问题。我使用JS from this post要选择下拉菜单项，一切正常，但是当我使用带有图标类的项目链接时，它们不会显示在标题上，并且在页面重新加载后，标题标题变为默认值(.dropdown 类文本)。 you can see it here 。 http://www.bootply.com/99235#

这是 HTML

<nav class="navbar navbar-default container" role="navigation">
<ul class="nav navbar-nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#"><i class="glyphicon glyphicon-home"></i>Home</a></li>
      <li><a href="#"><i class="glyphicon glyphicon-search"></i>Search</a></li>
      <li><a href="#"><i class="glyphicon glyphicon-gift"></i>Gift</a></li>
      <li><a href="#"><i class="glyphicon glyphicon-music"></i>Twitter</a></li>
      <li><a href="#"><i class="glyphicon glyphicon-envelope"></i>Contact</a></li>
    </ul>
  </li>
</ul>

这里是JS

 $(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents('.dropdown').find('.dropdown-toggle').html(selText+'<span class="caret"></span>');
});

JS 要求仅选择文本而不是图标类，那么我必须做出哪些更改才能解决这两个问题？

抱歉我的英语不好。

Answer 1

$(".dropdown-menu li a").click(function(){
  var selText = $(this).html();
  $(this).parents('.dropdown').find('.dropdown-toggle')
         .html(selText+'<span class="caret"></span>');
});

完成这项工作(请参阅this fork of your bootply)。