Zurb基金会菜单 - 仅在大范围扩展？

Question

如何才能使menuexpanded大到只有align-center只在介质上？

大了起来：

<ul class="menu expanded"> 
    <li><a href="#">One</a></li> 
    <li><a href="#">Two</a></li> 
</ul> 

介质：

<ul class="menu align-center> 
    <li><a href="#">One</a></li> 
    <li><a href="#">Two</a></li> 
</ul> 

我不想重复两次菜单。但我怎样才能动态地做到这一点？

Answer 1

首先我建议使用一个对象json来组织数据，并简单地使用它来生成动态的你输出html。

基于JSON JSON数据+的Javascript脚本的HTML生成器：JSON的HTML

var content_li = [{"type":"li", 
 
        "content":[{"type":"a","content":["One"],"attributes":{"href":"#"}}] 
 
        }, 
 
        {"type":"li", 
 
        "content":[{"type":"a","content":["Two"],"attributes":{"href":"#"}}] 
 
        } 
 
       ]; 
 
    var content_ul_expanded = {"type":"ul", 
 
       "content": content_li, 
 
       "attributes":{"class":"menu expanded"} 
 
       }; 
 

 
    var content_ul_aligned = {"type":"ul", 
 
       "content": content_li, 
 
       "attributes":{"class":"menu align-center"} 
 
       }; 
 

 
    var json_data = [content_ul_expanded, content_ul_aligned]; 
 
    //console.log(json_data); 
 
    var body = document.body; 
 
    var ul = []; 
 
    var li = []; 
 
    var a = []; 
 

 
    for(var i in json_data){ 
 
     //console.log(json_data[i]); 
 
     ul[i] = document.createElement(json_data[i].type); 
 
    // console.log(json_data[i].attributes.class); 
 
     ul[i].className = json_data[i].attributes.class; 
 
     for(var j in json_data[i].content){ 
 
     //console.log(json_data[i].content[j]); 
 
     li[j] = document.createElement(json_data[i].content[j].type); 
 
     a[j] = document.createElement(json_data[i].content[j].content[0].type); 
 
     a[j].href = json_data[i].content[j].content[0].attributes.href; 
 
     a[j].textContent = json_data[i].content[j].content[0].content[0]; 
 
     li[j].appendChild(a[j]); 
 
     ul[i].appendChild(li[j]); 
 
     } 
 
     body.appendChild(ul[i]); 
 
    }