如何将下拉箭头添加到具有子元素的<li> </li>

Question

这是我原来的菜单。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我想将其转换为

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

两个菜单之间的区别是，

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我想在包含子菜单的每个元素中添加下拉箭头。

我想要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