0

我试图弄清楚如何简单地将箭头动态添加到我的下拉菜单项中。我的 html 的标记非常简单。只是一个

<nav>
    <ul>
        <li> -Top level Link
            <ul>
                <li> -Child Level Links </li>
            </ul>
        </li>
    </ul>
</nav>

它们里面的东西对这个问题真的不重要，我想象的结构才是真正需要的..

我认为我需要做的是找出哪些菜单项具有子级链接，然后更改父链接或父链接的类<li>以包含向下箭头的图像，或者通过 jquery 添加向下箭头的图像。

任何帮助至少找出正确的方法将不胜感激，即使你不共享代码我总是可以使用谷歌找出方法。

我想我已经解决了我的需求..或多或少....

 $(document).ready(function(){ 
       $('.hmenu').has('ul').addClass('arrow'); 
       $('ul.arrow').find('a:first').append('*'); });

我知道我可以附加 html 并创建一个 div 并在 div 内放置一个图像，并使用一点 css 确保看起来不错。

如果有人有更简单的方法来做到这一点，我非常想知道。我没有太多需要或机会做 java script/jquery，因为我通常盯着 php 代码，但我喜欢动态，所以代码知道遇到 x 时该怎么做。

感谢所有回复的人！

4

4 回答 4

1

我想这就是你想要的

$("nav > ul > li > ul").parent().addClass("arrow");
于 2013-03-20T06:13:58.533 回答
0

您可以为此使用后代选择器将类添加到相关项目，例如：

$('ul li ul li').addClass('child');

另请参阅以获取更多信息：

http://api.jquery.com/descendant-selector/

于 2013-03-20T05:34:45.340 回答
0

如果您想要一个简单的箭头，只能通过 css 完成，“ ∨ ”是 ascii 代码中的向下箭头。

的CSS： -

.arrow1 { font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:12px; }

在第一个 li 之后添加此行：-

<li>-<span class="arrow1">&or;</span>Top level Link
          <ul>
              <li> -Child Level Links
           </li>
        </ul>
      </li>
于 2013-03-20T05:40:39.823 回答
0

或者你可以使用已经这样做的jquery插件..

这是您可以尝试的所有插件的列表..

不同的下拉插件

于 2013-03-20T06:01:41.240 回答