Zurb 基金会菜单 - 仅在大号上扩展

Question

如何使菜单expanded大而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 data + Javascript script script html 生成器：json to 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]);
    }