通过jquerydynamic加载菜单和子菜单的代码

Question

编写脚本

$(document).ready(function() {
    $("#ulSub").append('<li id="abc hover" class="DJ hover"><h5>Cancer information</h5><ul id="ulSub1 fadeIn/fadeOut">');
    var ciid = $("#ulSub li").find("ul");
    $(ciid).append('<li><h5>What is cancer</h5></li></ul></li>');
});

HTML

<div class="dmenu">
    <ul id="ulSub">
    </ul>
</div>

Answer 1

要实现这一点，请适当使用jQuery的.mouseover()和.mouseout()函数。

工作和直观的代码如下：

$(document).ready(function() {
  $("#ulSub").append('<li id="abc hover" class="DJ hover"><h5>Cancer information</h5><ul id="ulSub1 fadeIn/fadeOut">');
  var ciid = $("#ulSub li").find("ul");
  $(ciid).append('<li><h5>What is cancer</h5></li></ul></li>');
  if($("li").hasClass("DJ"))
    $("li").removeClass("DJ");
  $("li").mouseover(function(e) {
    $(this).addClass("DJ");
    e.stopPropagation();
  }).mouseout(function(e) {
    $(this).removeClass("DJ");
  });
});

.DJ{
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dmenu">
  <ul id="ulSub">
  </ul>
</div>

---

读取：

• .mouseover()|jQuery API文档
• .mouseout()|jQuery API文档