使用jQuery创建菜单

Creating menu with jQuery

本文关键字：菜单 创建 jQuery 使用      更新时间：2023-09-26
<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>

我通过我的DB生成这些链接，我想在link1中添加link2来创建嵌套导航，我必须注入一些jQuery来创建嵌套导航。

为此，我试着抓住link2 html并把它放在link1 html之后，但没有工作。谁可以帮助或建议另一个解决方案，从我可以通过jquery创建嵌套导航。

var link2 = $('#link2').parent().html(); 
var link1 = $('link').after();
link1 = link2;
console.log(link1);

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

你可以检查一下。不过，您必须添加一些CSS。此外，我不知道为什么你在一个div内添加链接，似乎对我来说没有必要。[更新了代码片段，使mouseenter/leave的效果更流畅，并添加了一些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>

相关文章：