jquery - 使用 Walker 类自定义菜单结构

Question

我有一个使用 wp_nav_menu 输出的简单菜单.我想输出以下类型之一:

<ul class="clearfix">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Movies <span class="arrow">&#9660;</span></a>

        <ul class="sub-menu">
            <li><a href="#">In Cinemas Now</a></li>
            <li><a href="#">Coming Soon</a></li>
            <li><a href="#">On DVD/Blu-ray</a></li>
            <li><a href="#">Showtimes &amp; Tickets</a></li>
        </ul>
    </li>
    <li><a href="#">T.V. Shows</a></li>
    <li class="current-item"><a href="#">Photos</a></li>
    <li><a href="#">Site Help</a></li>
</ul>

我真正关心的部分是插入的能力 <span class="arrow">&#9660;</span>在具有下拉菜单的所有菜单项上。

注意:我们的菜单只有两层。

Answer 1

您可以结合使用 css 选择器 ::after 和 css 属性 content: ""

 .menu__dropdown::after {
    content: " ▼"
}

现在只需将类 .menu__dropdown 添加到任何具有子菜单的菜单 a 中。查看现场演示:http://jsfiddle.net/8vndhv3j/