Jquery：追加和替换 动态地

Question

我们希望我们的资产净值有一个下拉指示器（箭头），其中有子菜单。每当有电流类别时，也会更改该指示器。

我们有这样的代码

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Company Profile</a></li>
    <li>
      <a href="#" class="drop">Products</a>
      <ul>
        <li><a href="#">All Products</a></li>
        <li><a href="#">Products 1</a></li>
        <li><a href="#">Products 2</a></li>
        <li><a href="#">Products 3</a></li>
    </li>
    <li><a href="#">Contact Us</a></li>
  </ul>      
</nav>

动态地，我们希望在具有子菜单的 LI 上附加一个 IMG，结果是这样的代码

<nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Company Profile</a></li>
        <li>
          <a href="#" class="drop">Products
            <img src="li_gray.png">
          </a>
          <ul>
            <li><a href="#">All Products</a></li>
            <li><a href="#">Products 1</a></li>
            <li><a href="#">Products 2</a></li>
            <li><a href="#">Products 3</a></li>
        </li>
        <li><a href="#">Contact Us</a></li>
      </ul>      
    </nav>

最后，当 LI 的 class="current" 时，我们希望指示箭头也发生变化。代码如下所示：**注意，IMG src 已更改为 li_white.png

<nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Company Profile</a></li>
            <li>
              <a href="#" class="drop current">Products
                <img src="li_white.png">
              </a>
              <ul>
                <li><a href="#">All Products</a></li>
                <li><a href="#">Products 1</a></li>
                <li><a href="#">Products 2</a></li>
                <li><a href="#">Products 3</a></li>
            </li>
            <li><a href="#">Contact Us</a></li>
          </ul>      
        </nav>

Answer 1

在我看来，您应该只使用 css 中的图像背景，而不是附加/更改图像。然后，您可以根据链接的状态（悬停、当前等）轻松更改背景图像，并且稍后更改它不会涉及标记的任何 JavaScript 或服务器端操作。

更好的是，使用 CSS 图像精灵！

更新：

这是一个示例（没有 CSS 精灵）：
http://jsfiddle.net/tsimbalar/JBcqB/

这个想法是添加一个特殊的 CSS 类具有子导航的链接，并基于该类在 CSS 中完成所有样式设置。

更新 2

和这里使用 CSS sprites（在这种情况下，来自 jQuery UI 的图标）。在这种情况下，我们只需“更改” :hover 上背景的位置，显示另一个图标。

http://jsfiddle.net/tsimbalar/gw686/

我们实际上确实需要一些javascript 有条件地检查链接是否有子导航。

UPDATE 3+4

它似乎不能在 IE 上正常工作（令人惊讶...），但我认为这是因为你使用了像 nav 这样的 HTML5 标签，它不能在 IE 中设置样式，而无需先进行一些小修改（请参阅 这个文章）。用 div 替换 nav 效果很好，即使使用 IE，即使链接之前已经有背景。

请参阅http://jsfiddle.net/tsimbalar/gw686/embedded/result/

Answer 2

您可能想要一些像这样的 jQuery。可能不是最优雅的解决方案，但应该让您朝着正确的方向前进。

$(document).ready(function() {
    $("ul li").each(function() {
        if($(this).children("ul").length > 0) {
            var $link = $(this).find("a").first();
            var $newImg = $("<img src=\"li_gray.png\">");
            $link.addClass("current");
            $link.append($newImg);
        }
    })
});;