JQ点击列表显示隐藏 

<!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=utf-8" />
<title></title>
<link href="css/css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://www.wusiwei.com/content/templates/weisayheibai/js/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('ul.archiver').find('.archiver_item:gt(1)').hide();
        $("li").click(function(){
            $(this).find(".archiver_item").slideToggle("slow");
        });
    });
</script>
<style>
</style>
</head>

<body>
<ul class="archiver">
<li class="nav_title"><h4>期货订购1</h4>
    <ol class="archiver_item">
        <li class="nav_con"><a href="http://www.wusiwei.com">我的订单</a></li>
            <li class="nav_con">我的订单</li>
            <li class="nav_con">我的订单</li>
        </ol>
    </li>
    <li class="nav_title"><h4>期货订购会2</h4>
    <ol class="archiver_item">
        <li class="nav_con">我的订单</li>
            <li class="nav_con">我的订单</li>
            <li class="nav_con">我的订单</li>
        </ol>
    </li>
     <li class="nav_title"><h4>期货订购会3</h4>
    <ol class="archiver_item">
        <li class="nav_con">我的订单</li>
            <li class="nav_con">我的订单</li>
            <li class="nav_con">我的订单</li>
        </ol>
    </li>
</ul>

</body>
</html>

 

posted @ 2014-08-26 09:40  壁虎漫步.  阅读(781)  评论(0)    收藏  举报