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 image sprites！

更新：

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

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

更新2

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

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

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

更新3 + 4

它似乎与IE无法正常工作（令人惊讶的......），但我认为这是因为你使用像nav这样的HTML5标签，如果没有先做一个小的黑客攻击就不能在IE中设置样式（见this article）。使用nav替换div即使使用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);
        }
    })
});;

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

2 个答案: