找回密码
 立即注册
首页 其他语言 javasctipt 查看内容
怎么用js控制菜单:
  • 打算写个cms管理后台.
  • 用两个菜单需要根据网址自动打开及手动打开两种方式
html代码展示用的是jinjia2模板.函数体忽略就好)
    <div class="container-fluid">
      <div class="row">
          <div class="col-sm-3 col-md-2 sidebar">
              <ul class="nav-sidebar">
                <li class="unfold"><a href="{{ url_for('admin.cms_index') }}">首页</a></li>
                <li class="profile-li">
                    <div>个人中心<span></span></div>
                    <ul class="subnav">
                        <li><a href="javascript:get_nav('profile');">个人信息</a></li>
                        <li><a href="#">修改信息</a></li>
                    </ul>
                </li>

                <li class="profile-li1 nav-group user-manage">
                    <div>应用管理<span></span></div>
                    <ul class="subnav">
                        <li><a href="{{ url_for('admin.publish_app') }}">发布应用</a></li>
                        <li><a href="{{ url_for('admin.app_list') }}">我的应用</a></li>
                        <li><a href="#">订单管理</a></li>
                    </ul>
                </li>
                <li class="nav-group user-manage"><a href="#">评论管理</a></li>
                <li class="role-manage"><a href="#">用户管理</a></li>
                <li class="role-manage"><a href="#">联系管理</a></li>
            </ul>
          </div>
          <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id="nav-content">
              <div class="box-group" id="box">
                {% block content %}{% endblock %}
              </div>
          </div>
        </div>
    </div>

html不是完整的.只展示了要用的ul.上方的导航也是用ul写的!
现在展示js怎么手动打开ul菜单:
function show_nav(event){ //定义一个函数
    if (event.tagName == 'DIV' || event.tagName == 'div'){   //判断tag标签是否是div类型,我是用div.用其他也可以
        var tag_parent = event.parentNode;  //获取到div的父级对象
        var ul_brother = tag_parent.getElementsByTagName('ul')[0]; //然后获取到ul对象,有的可能觉得id更直接,大家都晓得在一个div里查找会更快
        if (ul_brother.style.display == 'block'){  //判断ul的属性是否是block,不是就赋值block显示,不是就隐藏
            hide(tag_parent);  //然后把其他的父级对象传递给隐藏函数
        }else{
            hide(tag_parent);  //如果ul不是打开状态.就先把所有的ul关闭
            ul_brother.style.display = 'block';然后再打开自身
        }

    }
    function hide(event){ //隐藏函数
        var ul_parent = event.parentNode; //获取到父级对象
        var uls = ul_parent.getElementsByTagName('ul');  //然后获取到父级对象的所有ul
        for (var i = 0; i < uls.length; i++){  //遍历ul对象
            uls[i].style.display = 'none';  //隐藏ul对象
        }

    }
}

接下来是自动打开
一个没有自动打开的菜单实在是太out了
代码如下:
function executeHide(){  //函数
    var uls = document.getElementsByTagName('ul');  //获取到所有的ul对象
    var base_uri = window.location.href; 获取到当前的ul
    var re = /href="(\/\w*?\/\w*?\/)"/i; //准备好一个正则
    var y = 0;  //准备好一个判断遍历
    for (var i = 0; i < uls.length; i++){  //遍历ul对象
        y = 0;  //每次的变量初始化
        var class_name = uls[i].className;  //获取到所有对象的class名称
        if (i >=2 && class_name != 'pagination'){  //因为我导航条也是用ul写的.所有过滤掉第一个ul对象,还有一个是分页也是ul对象.一起过滤掉
            var lis = uls[i].getElementsByTagName('li');  //获取到ul对象的所有li标签
            for (var x = 0; x < lis.length; x++){  //变量li标签
                var re_exec = re.exec(lis[x].innerHTML);  //正则获取到当前标签对应的的url
                lis[x].className = ''; //因为要把激活的li标签给添加个背景.所以添加前就把以前的都给清除掉,
                if (re_exec){ //判断正则是否存在
                    if(base_uri.search(re_exec[1]) != -1){  //然后用当前url搜索li标签对应的url是否一致
                        lis[x].className = 'active';  //一致给这个li标签添加一个class
                        y = 1;  //然后给判断变量赋值
                    }
                }
            }
            if (y == 0){  //判断变量是否修改
                uls[i].style.display = 'none';  //不是当前ul就隐藏
            }else{
                uls[i].style.display = 'block';  //是就打开
            }
        }
    }
}
window.onload = function(){ //加载结束执行函数
    executeHide();
};
细心的都发现都是原生js.喜欢敲键盘的感觉.所以都用的原生js,用喜欢jquery自行百度对应方法!
分享至 : QQ空间
收藏
您需要登录后才可以回帖 登录 | 立即注册