Question

我想弄清楚如何简单地向我的下拉菜单项动态添加箭头。我的HTML标记非常简单。只是一个

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

他们内心真正对这个问题并不重要，我想象的结构是真正需要的......

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

任何帮助，至少要找出正确的方法，即使你不共享代码我也总是可以使用google来找出方法。

我想我已根据自己的需要找出了这个......或多或少......

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

我知道我可以附加html并创建一个div并在div中放置一个图像并用一点css确保看起来没问题。

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

感谢所有回复的人！

Answer 1

我认为这就是你想要的

$("nav > ul > li > ul").parent().addClass("arrow");

Answer 2

您可以使用后代选择器将类添加到相关项目ex：

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

另见更多信息：

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

Answer 3

如果你想要一个简单的箭头只能通过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>

Answer 4

或者您可以使用已经执行此操作的jquery插件..

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

Differenet dropdown plugins

Jquery - 添加图像仅下拉项目

4 个答案: