Question

我的jQuery Mobile NavBar中的图标出现两次，看不出原因，从jQuery docs复制的代码

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

输出如下图所示： http://tinypic.com/r/1fcppz/5

关于为什么会这样做的建议？

Answer 1

在代码中删除此冗余范围，似乎已完成：

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

Fiddle

Answer 2

您不必明确指定span标记。它们是由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>

jquery移动导航栏图标出现两次

2 个答案: