vue点击li添加class名字问题，求指导

发布于
2018-01-05

我这样写有点小问题，点击权限管理打开后点击部分管理1变色后，再点开电池管理下面的部门管理2也变色了，是因为循环ul的时候索引的问题吗，求指导请输入代码

请输入代码
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>vue点击切换显示隐藏</title>  
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>  
    <style type="text/css">  
    *{  
        padding: 0;  
        margin: 0;  
        font-size: 14px;  
    }  
    ul{  
        width: 200px;  
        height: auto;  
    }  
    h2{  
        background: green;  
        border: 1px solid #fff;  
        color: #fff;  
        height: 30px;  
        line-height: 30px;  
        text-indent: 24px;  
    }  
    h3{  
        background: #999;  
        height: 24px;  
        line-height: 24px;  
        border: 1px solid #fff;  
        text-indent: 50px;  
    }  
    a{
        display: block;
        width: 200px;
    }
    .zhe li.actives{
        color: #fff;
        background: red;
    }
    </style>  
</head>  
<body>  
    <div id="app">
    <ul>
        <li v-for="menu in menus" style="background:#ccc;margin:10px 0">
            <a  @click="toggle(menu)">{{menu.name}}</a>
            <ul v-show="menu.open" style="background:green;" class="zhe">
                <li v-for="(item,index) in menu.list" @click = "abc(index)" :class="{'actives':i==index}">{{item.name}}</li>
            </ul>
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                     i:null,
                menus: [
                    {
                        name: '权限管理',
                        open: false,
                        id:'aaa',
                        list: [
                            {
                                name: '用户管理1'
                            },
                            {
                                name: '部门管理1'
                            },
                            {
                                name: '角色管理1'
                            },
                            {
                                name: '菜单管理1'
                            }
                        ]
                    },
                    {
                        name: '电池管理',
                        open: false,
                        id:'bbb',
                        list: [
                            {
                                name: '用户管理2'
                            },
                            {
                                name: '部门管理2'
                            },
                            {
                                name: '角色管理3'
                            },
                            {
                                name: '菜单管理4'
                            }
                        ]
                    }
                ]
            }
        },
        methods:{
            toggle(item) {
                    if(!item.open){
                            this.menus.map((v)=>{
                                v.open=false
                        })
                    }
                    item.open=!item.open
            },
            abc(index){
                this.i=0
                this.i = index
            }, 
        }
   

    })
</script>
</body>  
</html>

vue.js javascript html 前端

阅读 5.7k

7 个回答

Reachel

✓ 已被采纳

在toggle方法后面加this.i = null

如果你还想再次点击之前点击的导航，其子级active不变，就在menus下面为每一个一级导航添加activeIndex变量用于记录子级导航的激活下标。
这样点击了权限管理下的角色管理1，然后点击电池管理下的用户管理2，再次回到权限管理，角色管理1也是激活状态

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>vue点击切换显示隐藏</title>  
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>  
    <style type="text/css">  
    *{  
        padding: 0;  
        margin: 0;  
        font-size: 14px;  
    }  
    ul{  
        width: 200px;  
        height: auto;  
    }  
    h2{  
        background: green;  
        border: 1px solid #fff;  
        color: #fff;  
        height: 30px;  
        line-height: 30px;  
        text-indent: 24px;  
    }  
    h3{  
        background: #999;  
        height: 24px;  
        line-height: 24px;  
        border: 1px solid #fff;  
        text-indent: 50px;  
    }  
    a{
        display: block;
        width: 200px;
    }
    .zhe li.actives{
        color: #fff;
        background: red;
    }
    </style>  
</head>  
<body>  
    <div id="app">
    <ul>
        <li v-for="(menu,menuindex) in menus" style="background:#ccc;margin:10px 0">
            <a  @click="toggle(menu)">{{menu.name}}</a>
            <ul v-show="menu.open" style="background:green;" class="zhe">
                <li v-for="(item,index) in menu.list" @click = "abc(index,menuindex)" :class="{'actives':menu.activeIndex==index}">{{item.name}}</li>
            </ul>
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                     i:null,
                menus: [
                    {
                        name: '权限管理',
                        open: false,
                        id:'aaa',
                        activeIndex:null,
                        list: [
                            {
                                name: '用户管理1'
                            },
                            {
                                name: '部门管理1'
                            },
                            {
                                name: '角色管理1'
                            },
                            {
                                name: '菜单管理1'
                            }
                        ]
                    },
                    {
                        name: '电池管理',
                        open: false,
                        id:'bbb',
                        activeIndex:null,
                        list: [
                            {
                                name: '用户管理2'
                            },
                            {
                                name: '部门管理2'
                            },
                            {
                                name: '角色管理3'
                            },
                            {
                                name: '菜单管理4'
                            }
                        ]
                    }
                ]
            }
        },
        methods:{
            toggle(item) {
                    if(!item.open){
                            this.menus.map((v)=>{
                                v.open=false
                        })
                    }
                    item.open=!item.open
            },
            abc(index,menuindex){
                this.menus[menuindex].activeIndex = index
            }, 
        }
   

    })
</script>
</body>  
</html>

wlove

6.9k3835

发布于
2018-01-05

更新于
2018-01-05

是因为你下面menu.list共用的标签是一样它只是改变了值并没有改变标签以及样式

所以上面操作的第几个标签下面第几个标签打开也会有样式

恢复初始值

silence

389512

发布于
2018-01-05

更新于
2018-01-05

重置i 的值是可以的

luozz

5.8k3629

发布于
2018-01-05

我就修改了一下toggle方法，你那个需求应该是能实现，但具体的用户体验你可以多琢磨琢磨，优化一下：

toggle(item) {
    if(!item.open){ //点击其它未展开的标签时
        this.menus.map((v)=>{
            v.open=false
        });
        this.i = null;  //让i重置为null或者小于0的数也可以
    }
    item.open=!item.open
}

车程一

14131726

发布于
2018-01-05

比如你点第一个菜单的第一个那index是0把，那this.i 变0了把。那你第二个菜单的第一个选项的条件也符合了把？

imaxing

5783919

发布于
2018-01-05

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>vue点击切换显示隐藏</title>
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  <style type="text/css">
  * {
    padding: 0;
    margin: 0;
    font-size: 14px;
  }

  ul {
    width: 200px;
    height: auto;
  }

  h2 {
    background: green;
    border: 1px solid #fff;
    color: #fff;
    height: 30px;
    line-height: 30px;
    text-indent: 24px;
  }

  h3 {
    background: #999;
    height: 24px;
    line-height: 24px;
    border: 1px solid #fff;
    text-indent: 50px;
  }

  a {
    display: block;
    width: 200px;
  }

  .zhe li.actives {
    color: #fff;
    background: red;
  }
  </style>
</head>

<body>
  <div id="app">
    <ul>
      <li v-for="(menu, idx) in menus" style="background:#ccc;margin:10px 0">
        <a @click="toggle(menu)">{{menu.name}}</a>
        <ul v-show="menu.open" style="background:green;" class="zhe">
          <li v-for="(item,index) in menu.list" @click="abc(idx, item)" :class="item.isActive ? 'actives' : ''">{{item.name}}</li>
        </ul>
      </li>
    </ul>
  </div>
  <script>
  new Vue({
    el: "#app",
    data() {
      return {
        i: null,
        menus: [{
            name: '权限管理',
            open: false,
            id: 'aaa',
            list: [{
                name: '用户管理1',
                isActive: false
              },
              {
                name: '部门管理1',
                isActive: false
              },
              {
                name: '角色管理1',
                isActive: false
              },
              {
                name: '菜单管理1',
                isActive: false
              }
            ]
          },
          {
            name: '电池管理',
            open: false,
            id: 'bbb',
            list: [{
                name: '用户管理2',
                isActive: false
              },
              {
                name: '部门管理2',
                isActive: false
              },
              {
                name: '角色管理3',
                isActive: false
              },
              {
                name: '菜单管理4',
                isActive: false
              }
            ]
          }
        ]
      }
    },
    methods: {
      toggle(item) {
        var index = this.menus.indexOf(item)
        if (!item.open) {
          this.menus.map((v, i) => {
            if (i !== index) {
              v.open = false
              v.list.map(_o => {
                _o.isActive = false
              })
            }
          })
        }
        item.open = !item.open
      },
      abc(idx, item) {
        this.menus[idx]['list'].forEach((o, i) => {
          o.isActive = false
        })
        item.isActive = true
      },
    }


  })
  </script>
</body>

</html>

不知道是不是你想要的结果, 希望帮助到你


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue点击切换显示隐藏</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
            font-size: 14px;
        }
        ul{
            width: 200px;
            height: auto;
        }
        h2{
            background: green;
            border: 1px solid #fff;
            color: #fff;
            height: 30px;
            line-height: 30px;
            text-indent: 24px;
        }
        h3{
            background: #999;
            height: 24px;
            line-height: 24px;
            border: 1px solid #fff;
            text-indent: 50px;
        }
        a{
            display: block;
            width: 200px;
        }
        .zhe li.actives{
            color: #fff;
            background: red;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(menu,idx) in menus" style="background:#ccc;margin:10px 0">
            <a  @click="toggle(menu)">{{menu.name}}{{idx}}</a>
            <ul v-show="menu.open" style="background:green;" class="zhe">
                <li v-for="(item,index) in menu.list" @click = "abc(idx,index)" :class="{'actives':menu.i==index}">{{item.name}}</li>
            </ul>
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                menus: [
                    {
                        name: '权限管理',
                        open: false,
                        id:'aaa',
                        i:null,
                        list: [
                            {
                                name: '用户管理1'
                            },
                            {
                                name: '部门管理1'
                            },
                            {
                                name: '角色管理1'
                            },
                            {
                                name: '菜单管理1'
                            }
                        ]
                    },
                    {
                        name: '电池管理',
                        open: false,
                        id:'bbb',
                        i:null,
                        list: [
                            {
                                name: '用户管理2'
                            },
                            {
                                name: '部门管理2'
                            },
                            {
                                name: '角色管理3'
                            },
                            {
                                name: '菜单管理4'
                            }
                        ]
                    }
                ]
            }
        },
        methods:{
            toggle(item) {
                if(!item.open){
                    this.menus.map((v)=>{
                        v.open=false;
                        v.i=null
                    })
                }
                item.open=!item.open
            },
            abc(idx,index){
                this.menus[idx].i = index
            },
        }
    })
</script>
</body>
</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

vue点击li添加class名字问题，求指导

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？