侧边导航栏只展开当前的导航

antd 实现侧导航栏只展开当前导航,其他关闭,效果如下

 

菜单的数据结构是这样的,子菜单要包含主菜单的名字

antd导航有个openkeys属性和onOpenChange事件,执行onOpenChange事件时,把展开的列表赋值过去

// 选中当前菜单收起其他菜单
  onOpenChange = (openKeys)=>{
    let keysLen = openKeys.length;
    if(keysLen>1){
      var trueOpen = openKeys.filter(item=>{
     // 最后一个是当前展开的,把当前展开以及父导航设置为openkeys
return openKeys[keysLen-1].includes(item) }) this.setState({openKeys:trueOpen}) }else{ this.setState({openKeys:openKeys}) } }

问题,adnt会把所有已经点击过的都传过来,所以只展开当前的,需要把其他的关闭就要确定当前导航的openkes

 

posted @ 2018-12-24 13:57  小小的忧愁  阅读(1810)  评论(0编辑  收藏  举报