Question

这个问题有点难题，我知道它不那么简单，我想根据点击的li创建新的导航链接，例如

<nav id="nav-main">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Gallery</a></li>
        <li><a href="">Tutorials</a></li>
        <li>Others
            <ul>
                <li>Employee Portal
                <ul>
                 <li><a href="">Current Staff</a></li>
                 <li><a href="">Retired Staff</a></li>
                 <li><a href="">Staff Profile</a></li>
                </ul>
               </li>
            </ul>
        </li>
    </ul>
</nav>

假设如果点击“主页”，我想创建如下所示的新导航栏

<nav id="nav_others">
    <ul>
        <li><a href="">Home</a></li>
    </ul>
</nav>

如果点击“员工档案”

，也一样

<nav id="nav_others">
        <ul>
          <li>Others
             <ul>
                <li>Employee Portal
                  <ul>
                       <li><a href="">Staff Profile</a></li>
                   </ul>
                </li>
              </ul>
           </li>
        <ul>
</nav>

我不知道有多少个父元素和子元素，我的导航元素会有，如果有人知道如何使用jquery或javascript实现这一点，请分享您的解决方案。

谢谢

Answer 1

将以下div添加到您的代码中（在nav-main之后）：

<nav id="nav_others">
  <ul></ul>
</nav>

使用以下Jquery：

<script>
$(document).ready(function(){ 
    $('.main').click(function(e){
       var val = $(this).text();
       $('#nav_others ul').append('<li class="prev"><a href="#">'+val+'</a></li>');
       e.preventDefault();
    });
});
</script>

如何使用jquery

1 个答案: