单击时无法激活导航栏中的引导下拉列表

我正在尝试使用引导导航下拉菜单创建网站的模型。我对此仍然很陌生，我已经通读了有关此内容的帖子并尝试了各种编辑，但是当我单击它时，我的下拉菜单仍然没有激活。 任何建议或指示将不胜感激。谢谢！

链接到我的jsfiddle：https://jsfiddle.net/allisoncodes/sdywsaf4/10/

.HTML：

<div class="dropdown">
  <button class="btn btn-default">
    <a href="#home">
      <icon class="fa fa-home"></icon>
    </a>
  </button>
  <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Community
    <span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Recent Activity</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Member Forum</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Member List</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Member Groups</a></li>
  </ul>
  <button class="btn btn-default">
    <a href="#">Pet Help</a></button>
  <button class="btn btn-default"><a href="#">Pets For Sale</a></button>
  <button class="btn btn-default"><a href="#">Pets Services</a></button>
  <div class="content">
  </div>
</div>

j查询：

$('[data-toggle=tab]').hover(function (e) {
  $(this).click();
});