jQuery simply realizes the effect of imitating JD.COM classification navigation layer

This paper illustrates the simple implementation of jQuery imitating JD.COM classification navigation layer. Share it for your reference, as follows:

<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function () {
    var alink01 = $(".item > ul");
    alink01.hover(function () {
      //alert div
      var divId = $(this).find("div").attr("id");
      var div = $("#" + divId); // The layer to float next to this element 
 
      div.css("position", "absolute"); // Let this layer be absolutely positioned 
 
      var self = $(this); // Current object 
 
      div.css("display", "block");
      var p = self.position(); // Object for this element 
 left And 
 top
      var x = p.left + self.width(); // Object for this floating layer 
 left
      div.css("left", x + 45); //20140916 Modify 
 
      div.css("top", p.top);
      div.show();
      //mouseenter
      $(this).removeClass("unfocus").addClass("focus");
    },
    function () {
      var divId = $(this).find("div").attr("id");
      var div = $("#" + divId); // The layer to float next to this element 
 
      div.css("display", "none");
      //mouseleave
      $(this).removeClass("focus").addClass("unfocus");
    });
  });
</script>

<div class="leftbody">
  <div class="item">
  <span> Total classification 
 </span>
  <ul class="focus">
    <li ><strong>php</strong> <br />
    php Basic grammar 
  php Instances 
 
    </li>
  </ul>
  <ul class="unfocus">
    <li ><strong>java</strong> <br />
    java Grammar 
  java Object-oriented 
 
    </li>
  </ul>
  <ul class="unfocus">
    <li ><strong>Python</strong> <br />
    Python Grammar 
  Python Graphic processing 
 
    </li>
  </ul>
  <ul class="unfocus">
    <li ><strong>javascript</strong> <br />
    javascript Slides 
  javascript Web special effects 
 
    </li>
  </ul>
  <ul class="unfocus">
    <li ><strong>C#</strong> <br />
    C# Desktop application 
  C# Network program 
 
    </li>
  </ul>
  <ul class="unfocus">
    <li ><strong>VC++</strong> <br />
    VC++ System program development 
  VC++ Network program 
 
    </li>
  </ul>
  <ul class="unfocus">
    <li ><strong>Delphi</strong> <br />
    Delphi Desktop program 
  Delphi Game development 
 
    </li>
  </ul>
  </div>
</div>

For more readers interested in jQuery related content, please check the topics of this site: "Summary of Ajax Usage in jquery", "Summary of jQuery Table (table) Operation Skills", "Summary of jQuery Drag Effects and Skills", "Summary of jQuery Extension Skills", "Summary of jQuery Common Classic Effects", "Summary of jQuery Animation and Special Effects Usage", "Summary of jquery Selector Usage" and "Summary of jQuery Common Plugins and Usage"

I hope this article is helpful to everyone's jQuery programming.