[英]Find and append nested <ul> to select menu with hyphens
尝试从现有菜单创建导航,这是标记:
<nav>
<ul id="nav">
<li>
<a href="?=home">Home</a>
<ul>
<li><a href="?=sub-1">Sub 1</a></li>
<li><a href="?=sub-2">Sub 2</a></li>
<li><a href="?=sub-3">Sub 3</a></li>
<li><a href="?=sub-4">Sub 4</a></li>
<li><a href="?=sub-5">Sub 5</a></li>
</ul>
</li>
<li>
<a href="?=about">About</a>
</li>
<li>
<a href="?=services">Services</a>
</li>
<li>
<a href="?=portfolio">Portfolio</a>
</li>
<li>
<a href="?=contact">Contact</a>
</li>
</ul>
</nav>
这是我拥有的javascript循环,当前可以找到并附加每个顶级菜单项,但我真的不确定如何定位嵌套子项并为嵌套子项附加连字符。
var nav = document.getElementById('nav');
var list = nav.children.length;
for (var i = 0; i < list; i++) {
var option = document.createElement('option');
option.innerHTML = nav.children[i].children[0].innerHTML;
option.value = nav.children[i].children[0].href;
select.appendChild(option);
}
因此,基本上可以做到这一点:
<select>
<option value="?=home">Home</option>
<option value="?=sub-1">- Sub 1</option>
<option value="?=sub-2">- Sub 2</option>
等等...
任何帮助将不胜感激! 谢谢。
您可以递归遍历您的ul。 这也将处理多级菜单。 跟踪递归级别和更高级别的项目以将破折号连接起来。
有关方法的说明: http : //blog.swapnilsarwe.com/javascript-traversing-html-dom-recursively.html
编辑 :这是一个例子。 您还需要将id ='select'的HTML select元素放在某处:
buildSelect(document.getElementById('nav'), '', document.getElementById('select'));
function buildSelect(current, optionSoFar, select) {
var currentLevelOption = optionSoFar;
for (var i=0; i<current.children.length; i++) {
var child = current.children[i];
if ('A' == child.tagName) {
var currentLevelLabel = child.innerText;
var separator = ('' == optionSoFar) ? '' : ' - ';
currentLevelOption = optionSoFar + separator + currentLevelLabel;
var option = document.createElement('option');
option.innerText = currentLevelOption;
option.value = child.href;
select.appendChild(option);
}
else {
buildSelect(child, currentLevelOption, select);
}
}
}
这是一个小提琴: http : //jsfiddle.net/GM54F/3/
只需使用jQuery。 这是一个jsFiddle ,它基于您的代码演示了此示例。 这比编写自己的自定义代码自己遍历DOM更加简单。
$("#nav a").each(function(){
myValue = $(this).attr("href");
myText = $(this).text();
$("#mySelect").append("<option value="+myValue + ">" + myText +"</option>");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.