juqery实现左边树

最新推荐文章于 2022-05-25 16:15:04 发布

絮飘

最新推荐文章于 2022-05-25 16:15:04 发布

阅读量712

点赞数

分类专栏： Jquery 文章标签： class function scroll url jquery div

本文链接：https://blog.csdn.net/comeonJ/article/details/7828136

版权

Jquery 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

装载jquery:

<script type="text/javascript" src="../js/jquery.js"></script>

code:
<script type="text/javascript">
$(document).ready(
function()
{
   $(".menuTitle").click(function(){
    $(this).next("div").slideToggle("slow")
    .siblings(".menuContent:visible").slideUp("slow");
    $(this).toggleClass("activeTitle");
    $(this).siblings(".activeTitle").removeClass("activeTitle");
   });
});
</script>

CSS:

<style type="text/css">
body
{
   margin:0;background-color:#9ad075;
}
.container
{
   width:100%; text-align:center; height:200px; overflow-y:scroll;
}
.menuTitle
{
   width:148px; height:25px; background-image:url(images/expand.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;
}
.activeTitle
{
   width:148px; height:25px; background-image:url(images/fold.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;
}
.menuContent
{
   background-color:#fff; margin:0 auto; height:auto; width:148px; text-align:left; display:none;
}
li
{
   background:url(images/arr.gif) no-repeat 20px 6px ; list-style-type:none;padding:0px 0px 0px 38px; font-size:12.7px; height:20px; line-height:20px;
}
ul
{
   margin:0;padding:0;
}
</style>

html:

<body>
<div class="container">

<div class="menuTitle">
   客户资料管理
</div>
<div class="menuContent">
   <ul>
    <li> <a href="#" title="客户列表" >客户列表</a></li>
    <li> <a href="#" title="客户列表" >客户列表</a></li>
    <li> <a href="#" title="客户列表" >客户列表</a></li>
   </ul>
</div>



<div class="menuTitle">
   客户资料管理
</div>
<div class="menuContent">
   <ul>
    <li> <a href="#" title="客户列表" >客户列表</a></li>
    <li> <a href="#" title="客户列表" >客户列表</a></li>
    <li> <a href="#" title="客户列表" >客户列表</a></li>
   </ul>
</div>



<div class="menuTitle">
   客户资料管理
</div>
<div class="menuContent">
   <ul>
    <li> <a href="#" title="客户列表" >客户列表</a></li>
    <li> <a href="#" title="客户列表" >客户列表</a></li>
    <li> <a href="#" title="客户列表" >客户列表</a></li>
    <li> <a href="#" title="客户列表" >客户列表</a></li>
    <li> <a href="#" title="客户列表" >客户列表</a></li>
    <li> <a href="#" title="客户列表" >客户列表</a></li>
    <li> <a href="#" title="客户列表" >客户列表</a></li>
    <li> <a href="#" title="客户列表" >客户列表</a></li>
    <li> <a href="#" title="客户列表" >客户列表</a></li>
   </ul>
</div>

</div>
</body>