Question

如何才能使menu 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数据+ Javascript脚本html生成器基于json：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]);
    }

Zurb基金会菜单 - 仅扩大了？

1 个答案: