如图，三个标题分别有多个子元素。通过点击三个标题分别控制显示和隐藏。上代码

第一种情况：点击 青1，其所有的标题下的列表全部隐藏，也就是只有一个标题的会显示子元素

     
 
      
        //通过当前列表的index和data里面自定义的aIndex属性进行判断，如果相同，就显示当前子元素
                                {
    {item.title}}                      
       
        {
   {item.items.length}}个
        
        
       
      
      
      
                            {
    {proItem}}    
      
     

clickTitle:function(index){               if(aIndex == index){

aIndex = -1; }else{
        aIndex = index;  } }

//如果当前元素已经被点击并显示子列表，那么aindex肯定就等于index， 　　　　　　　　　　　

所以让aindex赋值为负值，所以此时，aindex和所有的标题的index都不相等，所以当前的被点击的会被隐藏。否则，当前被点击的被index赋值，并显示子元素

 

 

data: {               aIndex:'', //定义一个中间变量                              list:[{                    title:'青1',                    items:[                        '青岛市市立医院1','青岛市市立医院2','青岛市市立医院3'                    ],                    show: false, //在循环里面加一个状态判断条件，在方法里面通过show状态判断是显示还是隐藏                },                {                    title:'青2',                    items:[                        '青岛市市立医院1','青岛市市立医院2'                    ],                    show: false,                },                {                    title:'青3',                    items:[                        '青岛市市立医院1','青岛市市立医院2','青岛市市立医院3'                    ],                    show: false,                },]            },

 

 

第二种情况：点击青1，显示青1下的子元素。点击青2或者其他，青1子元素依旧存在，不会有状态的改变。

//通过点击传过来的当前item下的show属性，动态的切换显示和隐藏，不影响其他的列表

     
    
      
                    
                               {
    {item.title}}                                        
       
                        
        {
   {item.items.length}}个                        
                                
                            
       
                
      
                
                      
      
                           {
    {proItem}}   
      
     

data: {                list:[{                    title:'青1',                    items:[                        '青岛市市立医院1','青岛市市立医院2','青岛市市立医院3'                    ],                    show: false, //在循环里面加一个状态判断条件，在方法里面通过show状态判断是显示还是隐藏                },                {                    title:'青2',                    items:[                        '青岛市市立医院1','青岛市市立医院2'                    ],                    show: false,                },                {                    title:'青3',                    items:[                        '青岛市市立医院1','青岛市市立医院2','青岛市市立医院3'                    ],                    show: false,                },]            },

clickTitle:function(item){       //通过点击传过来的当前item下的show属性，动态的切换显示和隐藏，不影响其他的列表          item.show = !item.show;        }