javascript - 如何将下拉箭头添加到具有子元素的

Question

这是我的原创菜单。

<ul class="mymenu">
<li><a href="#">1 HTML </a></li>
<li><a href="#">2 CSS</a>
    <ul>
    <li><a href="#">3.1 jQuery </a>
        <ul>
            <li><a href="#">3.1.1 Download</a></li>
            <li><a href="#">3.1.2 Tutorial</a></li>
        </ul>
    </li>
  </ul>
</li>
<li><a href="#">3 Javascript </a></li>
</ul>

我想把它转换成

<ul class="mymenu">
<li><a href="#">1 HTML </a></li>
<li><a href="#">2 CSS <span class="parent">&#9660</span></a>
    <ul>
    <li><a href="#">3.1 jQuery </a>
        <ul>
            <li><a href="#">3.1.1 Download</a></li>
            <li><a href="#">3.1.2 Tutorial</a></li>
        </ul>
    </li>
  </ul>
</li>
<li><a href="#">3 Javascript </a></li>
</ul>

两个菜单的区别在于，

<span class="parent">&#9660</span>

我想向每个具有子菜单的元素添加下拉箭头。

我想要 Jquery 或 javascript 解决方案。

Answer 1

我将提供两种解决方案。

1). Javascript 解决方案。使用 jQuery 你可以很容易地实现它:

$('a + ul').prev('a').append('<span class="parent">&#9660</span>');

演示:http://plnkr.co/edit/37k1KMpqJ6G2tPrvprBa?p=preview

2). 纯 CSS 解决方案。使用现代伪选择器，您可以这样做:

li a:not(:only-child):after {
    content: '\25bc';
}

附加信息::only-child和 :not选择器。支持:IE9+。

注意:CSS 解决方案不等同于 javascript 解决方案，因为它不会在 DOM 中插入 span.parent 元素。

演示:http://plnkr.co/edit/sfoctCWzjRCBlXG9dVyD?p=preview