zoukankan      html  css  js  c++  java
  • 菜单伸缩Js控制

    <div class="global_module procatalog">
    <h3>产品分类</h3>
    <ul class="m-treeview">
    <li class="m-expanded">
    <span>衬衫</span>
    <ul>
    <li><span>短袖衬衫</span></li>
    <li><span>长袖衬衫</span></li>
    </ul>
    </li>
    <li class="m-expanded">
    <span>卫衣</span>
    <ul>
    <li ><span>开襟卫衣</span></li>
    <li ><span>套头卫衣</span></li>
    </ul>
    </li>
    <li class="m-expanded">
    <span>裤子</span>
    <ul>
    <li><span>休闲裤</span></li>
    <li><span>免烫卡其裤</span></li>
    <li><span>牛仔裤</span></li>
    <li><span>短裤</span></li>
    </ul>
    </li>
    </ul>
    <p class="module_up_down"><img src="images/down.gif" alt="" /></p>
    </div>

    <script>

    /*产品树展开和关闭*/
    $(function(){
    $(".m-treeview > li > span").click(function(){ // 注意用的是 子选择器 ( > )
    var $ul = $(this).siblings("ul");
    if($ul.is(":visible")){
    $(this).parent().attr("class","m-collapsed");
    $ul.hide();
    }else{
    $(this).parent().attr("class","m-expanded");
    $ul.show();
    }
    return false;
    })
    })

    </script>

    ------------样式控制

    /**产品分类样式**/
    .procatalog .m-treeview{
    background:#FFFFFF;
    }
    .procatalog .m-treeview li span {
    cursor: pointer;
    }
    .procatalog .m-treeview li.m-expanded {
    padding-left:16px;
    background:url('../images/treeview-expanded.gif') no-repeat 0 0;
    }
    .procatalog .m-treeview li.m-expanded ul li {
    list-style-image: url('../images/treeview-item.gif');
    }
    .procatalog .m-treeview li.m-collapsed {
    padding-left:16px;
    background:url('../images/treeview-collapsed.gif') no-repeat 0 0;
    }
    .procatalog .m-treeview li.m-collapsed ul{
    display:none;
    }

  • 相关阅读:
    事务
    触发器
    入行大数据必须知道的事!
    5G如何使云计算更加前卫
    2021年加密货币和区块链风向
    2020年数据存储管理发生的7种变化
    如何克服物联网中数据集成的挑战
    从开发到产出:关于机器学习的七则干货建议
    如何利用机器学习进行静态分析
    AI如何改变DevOps?
  • 原文地址:https://www.cnblogs.com/fengyingwang/p/3635040.html
Copyright © 2011-2022 走看看