zoukankan      html  css  js  c++  java
  • Jquery仿京东分类导航层简单实现

        <script src="/js/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); //要浮动在这个元素旁边的层  
                    div.css("position", "absolute"); //让这个层可以绝对定位  
                    var self = $(this); //当前对象  
                    div.css("display", "block");
                    var p = self.position(); //获取这个元素的left和top  
                    var x = p.left + self.width(); //获取这个浮动层的left  
                    div.css("left", x + 45); //20140916修改
                    div.css("top", p.top);
                    div.show();
                    //mouseenter
                    $(this).removeClass("unfocus").addClass("focus");
                },
                function () {
                    var divId = $(this).find("div").attr("id");
                    var div = $("#" + divId); //要浮动在这个元素旁边的层  
                    div.css("display", "none");
                    //mouseleave
                    $(this).removeClass("focus").addClass("unfocus");
                });
            });
        </script>

    <div class="leftbody">
    	<div class="item">
    	<span>全部分类</span>
    	<ul class="focus">
    		<li ><strong>内科</strong> <br />
    		消化内科 内分泌及免疫 
    		</li> 
    	</ul>
    	<ul class="unfocus">
    		<li ><strong>内科</strong> <br />
    		消化内科 内分泌及免疫 
    		</li> 
    	</ul>
    
    	<ul class="unfocus">
    		<li ><strong>内科</strong> <br />
    		消化内科 内分泌及免疫 
    		</li> 
    	</ul>
    
    	<ul class="unfocus">
    		<li ><strong>内科</strong> <br />
    		消化内科 内分泌及免疫 
    		</li> 
    	</ul>
    	<ul class="unfocus">
    		<li ><strong>内科</strong> <br />
    		消化内科 内分泌及免疫 
    		</li> 
    	</ul>
    	<ul class="unfocus">
    		<li ><strong>内科</strong> <br />
    		消化内科 内分泌及免疫 
    		</li> 
    	</ul>
    	<ul class="unfocus">
    		<li ><strong>内科</strong> <br />
    		消化内科 内分泌及免疫 
    		</li> 
    	</ul>
    
        </div>
    </div>

  • 相关阅读:
    区块链简单模拟的一些资料
    解析配置文件的一段练习代码
    go语言字符串练习
    20180613更新 leetcode刷题
    啊哈 算法 中 图相关算法
    paxos 练手 推进中
    传智播客8月C/C++基础班开班
    虚拟机最佳实践:单个 VM、临时存储和已上传磁盘
    在微软平台上运行 SAP 应用程序
    了解 Windows Azure 存储的可伸缩性、可用性、持久性和计费
  • 原文地址:https://www.cnblogs.com/smartsmile/p/6234167.html
Copyright © 2011-2022 走看看