Question

我正在尝试为列表元素组（列表中的列表）实现简单站点

我面临两个问题：

以树形结构显示

单击-xxyy1的示例，将子元素内联显示为xxyy1下面的树，依此类推子元素，如截屏

中所示

其次是为父元素和子元素的每次点击创建面包屑

codepen URL供参考：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')
})

Answer 1

我努力浏览整个元素树，但为什么不做以下事情：

创建一个包含所有网页数组的变量：

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

现在，您可能希望存储一个包含网页名称的网址，然后将其传递给BuildTemplate方法并将其传递给href以进行相应的链接。

使用Jquery的简单站点地图

1 个答案: