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  
    //            });  
    //        });  
    //    });  

  • 相关阅读:
    C#中Bitmap类实现对图像操作的一些方法
    C# GDI+ 文字操作
    C#中使用GDI+实现复杂打印
    【Python基础】json.dumps()和json.loads()、json.dump()和json.load()的区分
    【Python爬虫】selenium基础用法
    【Python爬虫】PyQuery解析库
    【Python爬虫】BeautifulSoup 解析库
    【Python爬虫】正则表达式与re模块
    【Python爬虫】Requests库的基本使用
    【Python基础】*args,**args的详细用法
  • 原文地址:https://www.cnblogs.com/wei-dong/p/7473031.html
Copyright © 2011-2022 走看看