动态添加导航栏小箭头及悬停打开

效果如下：

有的不需要箭头

代码如下：

var dropdownItems = document.querySelectorAll('.headPCnav > li');
    // 遍历每个包含下拉菜单的li元素
    dropdownItems.forEach(function(item) {
        // 检查是否有子菜单
        if (item.querySelector('.headPCnavS')) {
            // 创建箭头元素
            var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
            svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
            svg.setAttribute("width", "12px");
            svg.setAttribute("height", "12px");
            svg.setAttribute("viewBox", "0 0 12 12");
            svg.setAttribute("version", "1.1");

            var title = document.createElementNS("http://www.w3.org/2000/svg", "title");
            title.textContent = "icon-jiantou-shang";
            svg.appendChild(title);

            var g1 = document.createElementNS("http://www.w3.org/2000/svg", "g");
            g1.setAttribute("id", "官网2.0");
            g1.setAttribute("stroke", "none");
            g1.setAttribute("stroke-width", "1");
            g1.setAttribute("fill", "none");
            g1.setAttribute("fill-rule", "evenodd");

            var g2 = document.createElementNS("http://www.w3.org/2000/svg", "g");
            g2.setAttribute("id", "2021/07/19官网2.1-文档");
            g2.setAttribute("transform", "translate(-271.000000, -94.000000)");
            g2.setAttribute("fill", "#989FA9");
            g2.setAttribute("fill-rule", "nonzero");

            var g3 = document.createElementNS("http://www.w3.org/2000/svg", "g");
            g3.setAttribute("id", "编组-2");
            g3.setAttribute("transform", "translate(-0.000000, 64.000000)");

            var g4 = document.createElementNS("http://www.w3.org/2000/svg", "g");
            g4.setAttribute("id", "编组-3");
            g4.setAttribute("transform", "translate(-0.000000, 0.000000)");

            var g5 = document.createElementNS("http://www.w3.org/2000/svg", "g");
            g5.setAttribute("id", "编组-54备份");
            g5.setAttribute("transform", "translate(-0.000000, 0.000000)");

            var g6 = document.createElementNS("http://www.w3.org/2000/svg", "g");
            g6.setAttribute("id", "编组-9");
            g6.setAttribute("transform", "translate(271.000000, 30.000000)");

            var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
            path.setAttribute("d", "M6.20419281,2.08865251 L6.20419281,2.08865251 C6.15771467,2.11374476 6.10773445,2.13212974 6.0666453,2.17058004 C6.05944489,2.17896766 6.05416156,2.18560433 6.04697625,2.1923116 C6.0380097,2.20232308 6.02374473,2.20566965 6.01485365,2.21405727 L1.19293182,6.89337332 C1.06433577,7.01702713 1,7.17749326 1,7.33793115 C1,7.50506219 1.07144561,7.67385945 1.21078945,7.79919361 C1.48411833,8.04486325 1.91831682,8.0381701 2.18088282,7.78248898 L6.52937372,3.56106058 L10.8152346,7.79919361 C11.0760798,8.05654096 11.5102179,8.06828927 11.785328,7.82428586 C12.0604532,7.58026833 12.0729973,7.17417493 11.8121522,6.91682758 L7.03670848,2.19403431 C6.82773046,1.98680086 6.50612711,1.94835055 6.24528196,2.06535357 C6.23101699,2.07029577 6.21845778,2.08204408 6.20419281,2.08869487 L6.20419281,2.08869487 L6.20419281,2.08865251 Z");
            path.setAttribute("id", "路径备份");
            

            g6.appendChild(path);
            g5.appendChild(g6);
            g4.appendChild(g5);
            g3.appendChild(g4);
            g2.appendChild(g3);
            g1.appendChild(g2);
            svg.appendChild(g1);
            var arrow = document.createElement('span');
            arrow.appendChild(svg);
            arrow.classList.add('down') // 向下的箭头
            // 获取a标签和文本内容
            var link = item.querySelector('.headPCnavA');
            var text = link.textContent;
            // 清空a标签的内容
            link.textContent = '';
            // 将箭头和文本添加到a标签中
            link.appendChild(document.createTextNode(text));
            link.appendChild(arrow);
            // 添加鼠标悬停事件监听器
            item.addEventListener('mouseenter', function() {
                arrow.classList.add('up') // 向上的箭头
            });
            // 添加鼠标离开事件监听器
            item.addEventListener('mouseleave', function() {
                arrow.classList.remove('up'); // 移除向上的箭头样式
                arrow.classList.add('down') // 向下的箭头
            });
        }
    });
<style>
    .down{
        transform: rotate(-180deg);
        display: inline-block;
        vertical-align: middle;
        transform-origin: center;
        margin-left: 7px;
        transition: transform 0.3s ease;//添加过渡效果
    }
    .up{
        transform: rotate(360deg);
        display: inline-block;
        vertical-align: middle;
        transform-origin: center;
        transition: transform 0.3s ease;//添加过渡效果
    }
</style>