내가 사용하고있는 CMS는 메뉴에 대해 다음과 같은 코드를 생성합니다.
<ul>
<li><a href="">second level menu</a></li>
<li><a href="">third level menu</a></li>
<li><a href="">third level menu</a></li>
</ul>
<ul>
<li><a href="">second level menu</a></li>
<li><a href="">third level menu</a></li>
</ul>
...
3 단계 메뉴 표시 방법을 변경하고 싶습니다. javascript를 사용하여이 코드를 다음과 같이 변경할 수 있습니까?
<ul>
<li><a href="">second level menu</a>
<ul>
<li><a href="">third level menu</a></li>
<li><a href="">third level menu</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="">second level menu</a>
<ul>
<li><a href="">third level menu</a></li>
</ul>
</li>
</ul>
...
당신은 구별 할 필요 li는 다음 식별 할 수 있도록 첫 번째 또는 다음 레벨 요소해야하는 요소. data-attributes 설정 은 "그렇게 나쁜 해결책"이 아니라고 생각합니다.
아래의 Btw는 상용구 코드 일 뿐이며 주어진 구조에서 실제로 작동합니다. 논리를 파악해야 다른 문제에 적용 할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li data-level="2"><a href="">second level menu</a></li>
<li data-level="3"><a href="">third level menu</a></li>
<li data-level="3"><a href="">third level menu</a></li>
</ul>
<ul>
<li data-level="2"><a href="">second level menu</a></li>
<li data-level="3"><a href="">third level menu</a></li>
</ul>
<script type="text/javascript">
var uls = document.querySelectorAll('ul');
for(var i=0; i<uls.length; i++) {
var children = uls[i].querySelectorAll("li");
var _children = Array.from(children).filter(e=> e.dataset.level == "3");
if (_children.length > 0) {
var newul = document.createElement("ul");
_children.map(e=>newul.appendChild(e));
uls[i].appendChild(newul);
}
}
</script>
</body>
</html>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다