zoukankan      html  css  js  c++  java
  • jq二级目录

    CSS:
    .qsc_nav_main .level1
    { text-align: center; height: auto; } .qsc_nav_main .level1 a { display: inline-block; font-size: 16px; height: 45px; color: #fff; } .qsc_nav_main .level2 { display: none; } .qsc_nav_main .level2 li { text-align: center; height: 45px; color: #999; }

    HTML:
    <div class="qsc_company_nav">
                    <ul class="qsc_nav_main">
                        <li class="level1">
                            <a href="javascript:;" class="current">首页</a>
                        </li>
                        <li class="level1">
                            <a href="javascript:;">合作企业管理</a>
                            <ul class="level2">
                                <li>供应商</li>
                                <li>采购商</li>
                            </ul>
                        </li>
                        <li class="level1">
                            <a href="javascript:;">账款管理</a>
                            <ul class="level2">
                                <li>应收账款</li>
                                <li>应付账款</li>
                                <li>账款确认</li>
                            </ul>
                        </li>
                        <li class="level1">
                            <a href="javascript:;">借款管理</a>
                            <ul class="level2">
                                <li>借款</li>
                                <li>还款</li>
                            </ul>
                        </li>
                        <li class="level1">
                            <a href="javascript:;">我的中心</a>
                            <ul class="level2">
                                <li>我的中心</li>
                                <li>三方协议查询</li>
                                <li>借款协议查询</li>
                            </ul>
                        </li>
                        <li class="level1">
                            <a href="javascript:;">账户管理</a>
                        </li>
                    </ul>
                </div>

    JS:

    /*二级菜单   显示一个二级菜单时其他的隐藏,再次点击已显示的二级菜单时,该二级菜单隐藏*/
    $(".level1 > a").click(function(){
    var iclass = $(this).attr("class");
    if (iclass=="current"){
    $(this).next().hide().prev("a").removeClass("current");
          }else {
    $(this).addClass("current").next().show()
    .parent().siblings()
    .children("a").removeClass("current").next().hide();
    return false;}
    });

     第二种方法:可同时显示多个二级菜单,点击显示/隐藏  
      
      
     $(function(){  
           $(".level1 > a").click(function(){  
              $(this).next().toggle(800,function(){                
                  //TODO  
              });  
           });  
        });  
      
    //    $(function(){  
    //        $(".level1 > a").click(function(){  
    //            $(this).next().slideToggle(800,function(){        //滑动  
    //                //TODO  
    //            });  
    //        });  
    //    });  

  • 相关阅读:
    华为OJ机试训练(一)
    mount CIFS return ERR -12 and report Cannot allocate memory
    ftk学习记(icon篇)
    使用jquery-mockjax模拟ajax请求做前台測试
    Objective-C 内存管理之 _ARC
    [LeetCode]Decode Ways
    设计模式六大原则——迪米特法则(LoD)
    ACM/ICPC2014鞍山现场赛E hdu5074Hatsune Miku
    2015届校园招聘笔试/面试 基础知识点 总结
    依据Path取Json指定节点的值
  • 原文地址:https://www.cnblogs.com/wei-dong/p/7473031.html
Copyright © 2011-2022 走看看