Jquery：追加和替换<；img>；动态地

我们希望有下拉指示器（箭头）到我们的导航，有子菜单。当指示器有电流等级时，也会改变该指示器

我们有这样的代码

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

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

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

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

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

在我看来，与其附加/更改图像，不如在css中使用图像背景。然后，您可以根据链接的状态（悬停、当前等）轻松地更改背景图像，稍后更改它将涉及对标记的任何javascript或服务器端操作

更好的是，使用

更新：

下面是一个示例（没有CSS精灵）：

其想法是为具有子导航的链接添加一个特殊的CSS类，并基于该类在CSS中进行所有样式设置

更新2

这里使用CSS精灵（在这种情况下，来自jQuery UI的图标）。在这种情况下，我们只需“更改”背景在

：hover

上的位置，显示另一个图标

我们确实需要一点javascript来有条件地检查链接是否存在子导航

更新3+4

它似乎不能与IE一起正常工作（令人惊讶……），但我认为这是因为您使用HTML5标记，如

nav

，如果不先做一些小的修改，就无法在IE中设置样式（请参阅）。将

nav

替换为

div

效果很好，即使使用IE，即使链接之前已经有背景

---

请参见

您可能需要这样的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);
        }
    })
});;

$（文档）.ready（函数（）{
$（“ul li”）。每个（函数（）{
如果（$（此）.children（“ul”）.length>0）{
var$link=$（this.find（“a”）.first（）；
var$newImg=$（“”）；
$link.addClass（“当前”）；
$link.append（$newImg）；
}
})
});;

谢谢@tsimbalar；对jquery的过分渴望会让您忘记一些基本的东西。xD@DoYouWantaWebsite哈哈，是的，的确如此；）但是，如果我们可以在不使用javascript的情况下为那些禁用了javascript的用户做一些事情（这仍然存在吗？），那么您是否可以帮助我解决这个问题，而不使用图像背景技术？我忘了我还有另一个问题，因为如果我们使用这种技术；我们已经有背景了。第一个是正常渐变的蓝色背景，第二个是我们的subnav的img。@DoYouWanta我更新了第二个例子，其中链接已经有了图像背景。我可以把这两张图片放在一起，但这需要更多的工作。。。去看看！实际上，它在FF中有效，但在IE中无效。。。我认为这与IE不了解HTML5元素如“nav”有关，也不知道如何在没有小技巧的情况下将样式应用于它（）。。。。而且它不能在jsfidle环境中正确应用，我认为…小心，您的html无效，您没有关闭一些

s。