正文
toggle样式css的简单介绍
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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="#"spanFree 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实现了点击按钮下拉菜单出现的功能
相关问答
Q1: jQuery中hover方法和toggle方法使用指南
jQuery提供一些方法（如：toggle）将两种事件效果合并到一起，比如：mouseover、mouseout；keyup、keydown等
1、hover函数
hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
参数:
over
(Function)
:
鼠标移到元素上要触发的函数。
out
(Function):
鼠标移出元素要触发的函数。
复制代码
代码如下:
script
type="text/javascript"
$(function(){
$("#panel
h5.head").hover(function(){
$(this).next().show();//
鼠标悬浮时触发
},function(){
$(this).next().hide();//
鼠标离开时触发
})
})
/script
2、toggle函数
toggle(fn,fn)
每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
可以使用unbind("click")来删除。
复制代码
代码如下:
script
type="text/javascript"
$(function(){
$("#panel
h5.head").toggle(function(){
$(this).next().show();//
第一次点击时触发
},function(){
$(this).next().hide();//
第二次点击时触发，之后不停的切换
})
})
/script
toggle()
方法切换元素的可见状态。
如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。toggle()方法切换元素的可见状态。
如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
所以上述的代码还可以写成：
复制代码
代码如下:
script
type="text/javascript"
$(function(){
$("#panel
h5.head").toggle(function(){
$(this).next().toggle();
},function(){
$(this).next().toggle();
})
})
/*$(function(){
$("#panel
h5.head").click(function(){
$(this).next().toggle();
})
})*/
/script
还可以添加一些css样式：
复制代码
代码如下:
style
type="text/css"
.highlight{
background:#FF3300;
}
/style
script
type="text/javascript"
$(function(){
$("#panel
h5.head").toggle(function(){//配合css样式使用
$(this).addClass("highlight");
$(this).next().show();
},function(){
$(this).removeClass("highlight");
$(this).next().hide();
});
})
/script
小伙伴们是否对jQuery中常见的hover事件和toggle事件有了新的认识了呢，希望本文能给大家带来一些帮助。
Q2: css样式选取框
用了JQ库，样式在style里，不过要配合js用
!DOCTYPE html
html
head
meta charset="utf-8"
title/title
script src="jquery-3.3.1.min.js"/script
/head
style
.div1{
text-align: center;
background: beige;
width: 50px;
height: 28px;
border-radius: 14px;
}
.span1{
/* margin-top: 7px; */ /* div的时候打开注释 */
background: #CCCCCC;
width: 13px;
height: 13px;
display: inline-block;
border-radius: 7px;
}
.div2{
text-align: center;
background: lawngreen;
width: 50px;
height: 28px;
border-radius: 14px;
}
.span2{
background: white;
width: 13px;
height: 13px;
display: inline-block;
border-radius: 7px;
}
.hid1{
display: none;
}
.hid2{
}
/style
body
!-- button的 --
button class="div1"
span class="hid1"是/span
span class="span1"/span
span class="hid2"否/span
/button
hr
hr
!-- div的 --
!-- div class="div1"
span class="hid1"是/span
span class="span1"/span
span class="hid2"否/span
/div --
/body
script
$(function(){
$(".div1").click(function(){
$(".span1").toggleClass("span2");
$(".div1").toggleClass("div2");
$(".hid1").toggle();
$(".hid2").toggle();
})
})
/script
/html
Q3: toggle如何在1.css和2.css中间切换
这个应该用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链接');//这样调用就可以了
Q4: 如何用jquery 控制css样式
//1、获取和设置样式
$("#tow").attr("class");//获取ID为tow的class属性
$("#two").attr("class","divClass");//设置Id为two的class属性。
//2、追加样式
$("#two").addClass("divClass2");//为ID为two的对象追加样式divClass2
//3、移除样式
$("#two").removeClass("divClass");//移除 ID为two的对象的class名为divClass的样式。
$(#two).removeClass("divClass divClass2")移除多个样式。
//4、切换类名
$("#two").toggleClass("anotherClass") ;//重复切换anotherClass样式
//5、判断是否含有某项样式
$("#two").hasClass("another")==$("#two").is(".another");
//6、获取css样式中的样式
$("div").css("color");// 设置color属性值. $(element).css(style)
//设置单个样式
$("div").css("color","red");
//7设置多个样式
$("div").css({fontSize:"30px",color:"red"});
$("div").css("height","30px")==$("div").height("30px");
$("div").css("width","30px")==$("div").height("30px");
Q5: javascript里面怎么toggle css 高度?
没看明白是想做什么呢？是要用toggle实现animate那段吗？
toggle 只能切换隐藏和显示状态，不能做高度的修改的，可以用 toggleClass 实现，但没有 animate 动画效果好。
.toggleClass( className )
在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。
.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject) ] )
绑定两个或多个处理程序绑定到匹配的元素，用来执行在交替的点击。
.animate( properties [, duration ] [, easing ] [, complete ] )
根据一组 CSS 属性，执行自定义动画。
