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

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

1 个答案: