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>

我通过我的数据库生成这些链接，我想在link2中添加link1来创建嵌套导航我必须注入一些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

你可以检查这个小提琴。你必须为它添加一些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>

使用jQuery创建菜单

1 个答案: