这个应该用document.createElement 来实现
toggle应该是js函数；
function toggle(href){//假定ID为toggleId
var ele = document.getElementById('toggleId')
if(ele)ele.remove()
//然后增加一个css
var cssele = document.createElement('link')
cssele.href = href
cssele.type = 'style/css'
cssele.rel = 'stylesheet'
var head = document.querySelector('head')
head.appendChild(cssele)
}
toggle('某个css链接')//这样调用就可以了
没看明白是想做什么呢？是要用toggle实现animate那段吗？toggle 只能切换隐藏和显示状态，不能做高度的修改的，可以用 toggleClass 实现，但没有 animate 动画效果好。
.toggleClass( className )
在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。
.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject) ] )
绑定两个或多个处理程序绑定到匹配的元素，用来执行在交替的点击。
.animate( properties [, duration ] [, easing ] [, complete ] )
根据一组 CSS 属性，执行自定义动画。
一、 head里添加meta移动端的样式<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<div class="nav">
<!--汉堡logo menu--> <label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<a href="#">Business</a>
<a href="#">Service</a>
<a href="#">Learn more</a>
<a href="#"><span>Free Trial</span></a>
</div></div>
这个汉堡包menu菜单样子其实有代码实现的 "☰" 而且是作为字体显示的，可以直接用font-size直接调整大小
二、css样式 -通用
body{
width: 100%
height: 100%
margin:0 //浏览器默认的body的margin是8px由浏览器的user-agent-stylesheet提供的。所以我们直接覆盖默认就可以了，
}
html{
font-family:'helvetica neue',sans-serif //可以写很多种字体样式，意思是浏览器自己一个个识别，前一个没有就看后一个，一直往后找，直到找到可以用的
}.nav{
float: right
text-align: right
height: 70px
line-height: 70px
border-bottom: 1px solid #eaeaea
}
label{
display: none
}
#toggle{
display:none
}
.menu a{
margin: 0 10px
text-decoration: none
color: gray
}
.menu{
margin: 0 30px 0 0
}
.menu a span{
color:#54d17a
}
//添加@media样式：
@media only screen and (max-width: 500px) {
label{
display: block
cursor: pointer
width: 26px
float: right
}
.menu{
width: 100%
display: none
text-align: center
}
.menu a{
display: block
clear:right
}
#toggle:checked + .menu{ //这是个技术点
transition:all 0.4s ease-in
display: block
}
}
label用for绑定的input，自带了点击事件，点击了label的哪个汉堡logo,input就checked，这样就利用纯CSS实现了点击按钮下拉菜单出现的功能
