我正在尝试为列表元素组(列表中的列表)实现简单的站点
我面临两个问题:
以树状结构显示
单击 -xxyy1 的示例，将内联子元素显示为 xxyy1 下方的树等子元素，如屏幕截图所示 
其次是为每次点击父元素和子元素创建面包屑
codepen 引用网址:http://codepen.io/divyar34/pen/YZNmyK
HTML:
<body>
<div id="breadcrumbs"></div>
<div>
<h1>Home Page</h1>
<header>
<div>
<nav>
<div>
<ul>
<li>
<a>xyz</a>
<div>
<ul>
<li>
<a>aa</a>
</li>
<li>
<a>bb</a>
</li>
<li>
<a>cc</a>
</li>
<li>
<a>a11
<span>This link will open a new window</span></a>
</li>
</ul>
</div>
</li>
<li>
<a>zzz</a>
<div>
<ul>
<li>
<a>One zzz</a>
</li>
<li>
<a>Two zzz</a>
</li>
<li>
<a>Three</a>
</li>
<li>
<a>Four</a>
</li>
</ul>
</div>
</li>
<li>
<a>About ab12</a>
<div>
<ul>
<li>
<a>iii</a>
</li>
<li>
<a>jjj</a>
</li>
</ul>
</div>
</li>
<li>
<a>b11</a>
</li>
</ul>
<ul>
<li>
<a>c11</a>
<div>
<ul>
<li>
<a>c12</a>
</li>
<li>
<a>c13</a>
</li>
<li>
<a>c14</a>
</li>
</ul>
</div>
</li>
<li>
<a>d11</a>
</li>
<li>
<a>dd1</a>
<div>
<ul>
<li>
<a>dd2</a>
</li>
<li>
<a>dd3
<span>This link will open a new window</span></a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div>
<nav>
<div>
<div></div>
</div>
<div>
<nav>
<ul>
<li><a>ab12<span>ab12 Home Page</span></a>
</li>
<li><a>xxyy</a>
<ul>
<li><a>xxyy1</a>
<div>
<div>
<h3>abc1<h3>
<ul>
<li><a>1111</a>
</li>
<li><a>1112</a>
</li>
<li><a>1113</a>
</li>
<li><a>1114</a>
</li>
<li><a>1115</a>
</li>
</ul>
</h3></div>
<div>
<h3>abc2</h3>
<ul>
<li><a>2221</a>
</li>
<li><a>2222</a>
</li>
<li><a>2223</a>
</li>
<li><a>2224</a>
</li>
<li><a>2225</a>
</li>
</ul>
</div>
<div>
<h3>abc3</h3>
<ul>
<li><a>3331</a>
</li>
<li><a>3332</a>
</li>
<li><a>3333</a>
</li>
<li><a>3334</a>
</li>
</ul>
</div>
<div>
<h3>abc4</h3>
<ul>
<li><a>4441</a>
</li>
<li><a>4442</a>
</li>
<li><a>4443</a>
</li>
<li><a>4444</a>
</li>
<li><a>4445</a>
</li>
</ul>
</div>
</div>
</li>
<li><a>zzz1</a>
<div>
<div>
<h3>kk1</h3>
<ul>
<li><a>kk11</a>
</li>
<li><a>kk22</a>
</li>
<li><a>kk33</a>
</li>
</ul>
</div>
<div>
<h3>kk2</h3>
<ul>
<li><a>kk21</a>
</li>
<li><a>kk22</a>
</li>
<li><a>kk23</a>
</li>
<li><a>kk24</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li>
</li>
</ul>
</nav>
</div>
</nav>
</div>
</header>
</div>
<div></div>
</body>
CSS:
a{
border:1px solid black;
text-decoration:none;
padding: 5px;
}
ul li{
list-style-type:none;
display:inline;
cursor:pointer;
}
nav{
display:inline;
}
div, ul{
display:inline;
}
ul li ul{
display:none;
padding:5px;
}
h1{
text-align:center;
}
.siteBlock{
display:inline;
}
.child{
color:red;
}
JS:
$('li ul').addClass('child');
$('ul:not(.child) li').click(function(){
console.log($(this).first('a').text())
var curr = $(this).first('a').text();
$('#breadcrumbs').append(curr); $(this).find('.child').css('display','inline')
})
最佳答案
我很难遍历整个元素树，但是你为什么不做下面这样的事情:
创建一个包含所有页面数组的变量:
var pages = ["Home", "About", "Contact"];
然后，对它们运行一个循环，调用一个为树构建 HTML 元素的函数:
$.each(pages, function(i, e) {
var html = BuildTemplate(e, i > 0);
$("body").append(html);
});
函数如下:
function BuildTemplate(pageTitle, appendCarrot) {
result = "";
if (appendCarrot) {
result += " -> ";
}
result += "<a href='http://www.yahoo.com' target='_blank'>";
result += pageTitle;
result += "</a>";
return result;
}
工作演示:http://jsbin.com/lovategiva/edit?js,console,output
现在，您可能想要存储一个带有页面名称的 URL，并将其传递给 BuildTemplate 方法，然后将其传递给 href 以相应地链接它。
关于jquery - 使用 Jquery 的简单站点地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42702167/