1

我的 jQuery Mobile NavBar 中的图标出现了两次，不明白为什么，从 jQuery 文档复制的代码

<link rel="stylesheet"
      href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

和导航栏本身

<div data-role="navbar" class="ui-navbar" role="navigation">
  <ul class="ui-grid-b">
    <li class="ui-block-a">
      <a id="showlatest" data-icon="grid" data-theme="a"
         class="ui-btn-active ui-btn-icon-top ui-btn-up-a">
        <span class="ui-btn-inner" aria-hidden="true">
          <span class="ui-btn-text">Latest</span>
          <span class="ui-icon ui-icon-grid ui-icon-shadow"></span>
        </span>
      </a>
    </li>
    <li class="ui-block-b">
      <a id="showstages" data-icon="star"
         class="ui-btn ui-btn ui-btn-up-a ui-btn-icon-top" data-theme="a">
        <span class="ui-btn-inner" aria-hidden="true">
          <span class="ui-btn-text">Top</span>
          <span class="ui-icon ui-icon-star ui-icon-shadow"></span>
        </span>
      </a>
    </li>
    <li class="ui-block-c">
      <a id="showclass" data-icon="gear" data-theme="a"
         class="ui-btn ui-btn-up-a ui-btn-icon-top">
        <span class="ui-btn-inner" aria-hidden="true">
          <span class="ui-btn-text">Other</span>
          <span class="ui-icon ui-icon-gear ui-icon-shadow"></span>
        </span>
      </a>
    </li>
  </ul>
</div>

输出如下图所示：

在此处输入图像描述

关于为什么会发生这种情况的建议？

4

2 回答 2

1

在你的代码中删除这个多余的跨度，看起来你已经完成了：

<span class="ui-icon ui-icon-star ui-icon-shadow"></span>

小提琴

于 2013-05-02T13:26:23.640 回答
1

您不必明确指定跨度标签。它们是由 jQuery 插件本身为您生成的。尝试用此代码替换。

<div data-role="navbar" class="ui-navbar" role="navigation">
  <ul class="ui-grid-b">
    <li class="ui-block-a">
      <a id="showlatest" data-icon="grid" data-theme="a"
         class="ui-btn-active ui-btn-icon-top ui-btn-up-a">Latest</a>
    </li>
    <li class="ui-block-b">
      <a id="showstages" data-icon="star"
         class="ui-btn ui-btn ui-btn-up-a ui-btn-icon-top" data-theme="a">Top</a>
    </li>
    <li class="ui-block-c">
      <a id="showclass" data-icon="gear" data-theme="a"
         class="ui-btn ui-btn-up-a ui-btn-icon-top">Other</a>
    </li>
  </ul>
</div>
于 2013-05-02T13:38:49.990 回答