the5fire的技术博客

关注Python、Django、Vim、Linux、Web开发、团队管理和互联网--Life is short, we need Python.


JQuery实现百度文库的左侧分类扩展div

作者:the5fire | 标签:     | 发布:2011-03-25 4 p.m. | 阅读量: 5161, 5044

虽然做的时候比较繁琐,因为jquery用的还不是很熟悉,不过完成之后发现其实没有多少技术含量,且发上来供大家参考把。

代码:

.. code:: html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>demo</title>
<link rel="stylesheet" type="text/css" href="homenew.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(function(){

                var tab_cate_out = $(".tab-cate-out");  
                var tab_cate_inner = null;
                var popup_cate = $(".popup-cate");

                tab_cate_out.mouseover(function() {

                    tab_cate_inner=$(this);
                    tab_cate=tab_cate_inner.children(".tab-cate");
                    tab_cate_inner.addClass(" cate-menu-on");
                    tab_cate_inner.next(".popup-cate").show();



                    /*以下两个事件给弹出窗体*/
                    tab_cate_inner.next(".popup-cate").mouseover(function() { 
                        tab_cate_inner.addClass(" cate-menu-on");
                        tab_cate_inner.next(".popup-cate").show();


                    });  
                    tab_cate_inner.next(".popup-cate").bind("mouseleave", function() {  
                        tab_cate_inner.next(".popup-cate").hide();  
                        tab_cate_inner.removeClass("cate-menu-on");


                    });

                });  
                //关键的一句,绑定Div对象的mouseleave事件  
                tab_cate_out.bind("mouseleave", function() {  
                    tab_cate_inner.next(".popup-cate").hide();  
                    tab_cate_inner.removeClass("cate-menu-on");



                });  
            });  
</script>
</head>
<body>
<div id="cate-menu" class="cate-menu">
    <div class="cate-menu-box">
        <div class="tab-cate-out ">
            <a href="#">测试数据</a>
            <div class="tab-cate img">&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">测试数据</a>&nbsp;&nbsp;
                    <a href="#">测试数据</a>&nbsp;
            </div>
        </div>
        <div class="popup-cate" style="display: none;">
        <ul>
            <li><a href="#">&nbsp;测试数据</a></li>
            <li><a href="#">&nbsp;测试数据</a></li>
        </ul>
        </div>
    </div>
    <div class="cate-menu-box"><div class="tab-cate-out ">
        <a href="#">测试数据</a>
        <div class="tab-cate img">&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#">测试数据</a>&nbsp;&nbsp;
        <a href="#">测试数据</a>&nbsp;</div></div>
        <div class="popup-cate" style="display: none;">
            <ul>
            <li><a href="#">&nbsp;测试数据</a></li>
            <li><a href="#">&nbsp;测试数据</a></li>
            </ul>
        </div>
        </div>
        <div class="cate-menu-box">
            <div class="tab-cate-out ">
            <a href="#">测试数据</a>
            <div class="tab-cate img">&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#">测试数据</a>&nbsp;&nbsp;
            <a href="#">测试数据</a>&nbsp;
            </div>
        </div>
            <div class="popup-cate" style="display: none;">
                <ul>
                <li><a href="#">&nbsp;测试数据</a></li>
                <li><a href="#">&nbsp;测试数据</a></li>
                </ul>
            </div>
        </div>
            <div class="cate-menu-box"><div class="tab-cate-out ">
            <a href="#">测试数据</a>
                <div class="tab-cate img">&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#">测试数据</a>&nbsp;&nbsp;
                <a href="#">测试数据</a>&nbsp;
                </div>
            </div>
            <div class="popup-cate" style="display: none;">
                <ul>
                <li><a href="#">&nbsp;测试数据</a></li>
                <li><a href="#">&nbsp;测试数据</a></li>
                </ul>
            </div>
        </div>
        </div>
</div>
</body>

打包下载:点我呀 <http://u.115.com/file/f4787acd98>_

- from the5fire.com
----EOF-----

微信公众号:Python程序员杂谈



其他分类: