the5fire的技术博客

关注python、vim、linux、web开发和互联网--life is short, we need python.


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

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

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

http://www.the5fire.net/wp-content/uploads/2011/03/div-300x192.jpg

代码:

<!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>

打包下载:点我呀


----EOF-----

扫码关注,或者搜索微信公众号:码农悟凡


其他分类: