javascript - 使用 jQuery 创建菜单

Question

<li><div class="link" id="contentLink1"><a href="link1.html" target="_blank">Link 1</a></div></li>

<li><div class="link" id="contentLink2"><a href="link2.html" target="_blank">Link 2</a></div></li>

我通过数据库生成这些链接，我想在 link1 中添加 link2 以创建嵌套导航，我必须注入(inject)一些 jQuery 来创建嵌套导航。

为此，我尝试抓取 link2 html 并将其放在 link1 html 之后，但没有成功。任何人都可以帮助或建议其他解决方案，我可以通过 jquery 创建嵌套导航。

var link2 = $('#link2').parent().html(); 

var link1 = $('link').after();

link1 = link2;

console.log(link1);

我只是想看看link2内容是否被复制到link1 html内容中，但没有让它工作。

Answer 1

你可以检查这个 fiddle 。不过，您必须向其中添加一些 CSS。另外，我不知道为什么你要在 div 中添加链接，对我来说似乎没有必要。[更新了代码片段以获得更平滑的鼠标进入/离开效果并添加了一些 css]

$('#contentLink1').on({
  mouseenter: function() {
    $('.submenu').css('display', 'flex');
  },
  mouseleave: function() {
    $('.submenu').css('display', 'none'); 
  }
});

$('.submenu').append('<li><div class="link" id="contentLink2"><a href="link2.html" target="_blank">Link 2</a></div></li>');

.submenu {
  display: none;
  list-style: none;
  width: 100%;
  margin: 0px;
  padding: 0px;
  z-index: 10;
}
.submenu li .link {
  background-color: #ccc;
} 

.link {
  background-color: #000;
  width: 80px;
  text-align: center;
}
a {
  color: #fff;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <div class="link" id="contentLink1">
    <a id="link1" href="link1.html" target="_blank">Link 1</a>
    <ul class="submenu">
     
    </ul>
  </div>
</li>