Question

我有一个列表代码

CREATE TRIGGER update_emp_trg AFTER UPDATE ON employee FOR EACH ROW
INSERT INTO emp_log VALUES (old.empid, old.name, old.sal);

如果链接名称中有一个字符“_”（没有引号），则代码列表的结构将是一个子菜单，并输入以前有的标记列表 - 子课。

<div id="nav">
   <ul>
     <li><a href="https://"> Home </a></li>
     <li><a href="https://"> Profile </a></li>
     <li><a href="https://"> _Vision </a></li>
     <li><a href="https://"> _Mission </a></li>
    </ul>
   </ul>
</div>

javascript代码如何能够执行它，因为我还在学习阶段使用javascript代码或jQuery。我非常感谢他的帮助。

Answer 1

如果文本以li

开头，您可以创建一个简单包装ul.sub-menu标记及_标记的包裹函数

function wrap(node) {
  let ul = document.createElement("ul");
  ul.className = "sub-menu";
  node.textContent = node.textContent.trim().substr(1, node.textContent.length);
  node.parentNode.insertBefore(ul, node);
  let inserted = node.previousElementSibling.appendChild(node);
  $(inserted).parent().prev("li").addClass("has-sub");
}

$("ul > li > a").each((index, ele) => {
  if (ele.textContent.trim().charAt(0) === "_") {
    wrap(ele.parentNode);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
  <ul>
    <li><a href="https://"> Home </a></li>
    <li><a href="https://"> Profile </a></li>
    <li><a href="https://"> _Vision </a></li>
    <li><a href="https://"> _Mission </a></li>
  </ul>
</div>

Answer 2

let submenu = null
Array.from(document.getElementById('nav').children[0].children)
    .map(
        function(e) {
            if (e.children[0].textContent.charAt(0) == '_') {
                if (!submenu) {
                    submenu = document.createElement('ul')
                }
                e.children[0].textContent = e.children[0].textContent.substring(1)
                submenu.appendChild(e)
            } else {
                if (submenu) {
                    e.previousSibling.replaceWith(submenu)
                    submenu = null
                }
            }
        }
    )

if (submenu) {
    document.getElementById('nav').children[0].lastChild.replaceWith(submenu)
}

<div id="nav">
   <ul>
     <li><a href="https://">Home</a></li>
     <li><a href="https://">Profile</a></li>
     <li><a href="https://">_Vision</a></li>
     <li><a href="https://">_Mission</a></li>
     <li><a href="https://">Menu2</a></li>
     <li><a href="https://">_sub1</a></li>
     <li><a href="https://">_sub2</a></li>
    </ul>
   </ul>
</div>

如果<li>标记列表结构在链接名称中找到特定字符，则更改它

2 个答案: