Question

我有一个使用Bootstrap 3的应用程序。在该应用程序中，我有一个与屏幕右侧对齐的菜单。该菜单可在此fiddle中看到。菜单的代码如下所示：

<div class="dropdown pull-right">
  <a id="myDrop" href="#" class="btn btn-default  dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
    <i class="glyphicon glyphicon-home"></i>
    <span class="caret"></span>
  </a>

  <ul id="myMenu" class="dropdown-menu" role="menu" aria-labelledby="myDrop">
    <li role="presentation" class="active">
      <a role="menuitem" tabindex="-1" href="#" data-target="#home">
        <i class="glyphicon glyphicon-home"></i>
        Home
      </a>
    </li>

    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#" data-target="#profile">
        <i class="glyphicon glyphicon-user"></i>
        Profile
      </a>
    </li>

    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#" data-target="#messages">
        <i class="glyphicon glyphicon-inbox"></i> 
        Messages
      </a>
    </li>

    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#" data-target="#settings">
        <i class="glyphicon glyphicon-cog"></i>
        Settings
      </a>
    </li>
  </ul>
</div>

每个图标旁边的文字不会垂直居中。我真正的问题是，当用户选择菜单项时，我想更新myDrop中显示的图标。 myDrop中的图标应更改为所选菜单项的图标。我能够通过使用以下内容获取文本：

$('#myMenu li a').on('click', function () {
  var $this = $(this);
  var parent = $this.closest('li');
  var target = $this.data('target');
  var btn = $this.closest('.dropdown').find('.btn.dropdown-toggle');
  var str = $this.text() + " <span class='caret'></span>";

  parent.siblings().removeClass('active');
  parent.addClass('active');

  btn.html(str);
  $('#myTab a[href="' + target + '"]').tab('show');  
});

这会选择文字。它不使用图标。我尝试使用jQuery＆＃39; .find函数。但是，我一直在undefined。我不确定自己做错了什么。

Answer 1

你可以改变：

btn.html(str);

到

btn.html($(this).html()).append("<span class='caret'></span>");

http://jsfiddle.net/wnje9zak/3/

或者，如果你只想要这个图标，你可以这样做：

btn.html('').append($(this).find('i').clone()).append("<span class='caret'></span>");

在Bootstrap中更新按钮图标

1 个答案: