一、 head里添加meta移動(dòng)端的樣式
我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、成都做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、寶山ssl等。為近千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的寶山網(wǎng)站制作公司
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
這個(gè)漢堡包menu菜單樣子其實(shí)有代碼實(shí)現(xiàn)的 "?" 而且是作為字體顯示的，可以直接用font-size直接調(diào)整大小
二、css樣式 -通用
body{
width: 100%;
height: 100%;
margin:0; //瀏覽器默認(rèn)的body的margin是8px;由瀏覽器的user-agent-stylesheet提供的。所以我們直接覆蓋默認(rèn)就可以了，
}
html{
font-family:'helvetica neue',sans-serif; //可以寫很多種字體樣式，意思是瀏覽器自己一個(gè)個(gè)識別，前一個(gè)沒有就看后一個(gè)，一直往后找，直到找到可以用的
}.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{ //這是個(gè)技術(shù)點(diǎn)
transition:all 0.4s ease-in;
display: block;
}
}
label用for綁定的input，自帶了點(diǎn)擊事件，點(diǎn)擊了label的哪個(gè)漢堡logo,input就checked，這樣就利用純CSS實(shí)現(xiàn)了點(diǎn)擊按鈕下拉菜單出現(xiàn)的功能
jQuery提供一些方法（如：toggle）將兩種事件效果合并到一起，比如：mouseover、mouseout；keyup、keydown等
1、hover函數(shù)
hover(over,out)一個(gè)模仿懸停事件（鼠標(biāo)移動(dòng)到一個(gè)對象上面及移出這個(gè)對象）的方法。這是一個(gè)自定義的方法，它為頻繁使用的任務(wù)提供了一種“保持在其中”的狀態(tài)。
參數(shù):
over
(Function)
:
鼠標(biāo)移到元素上要觸發(fā)的函數(shù)。
out
(Function):
鼠標(biāo)移出元素要觸發(fā)的函數(shù)。
復(fù)制代碼
代碼如下:
script
type="text/javascript"
$(function(){
$("#panel
h5.head").hover(function(){
$(this).next().show();//
鼠標(biāo)懸浮時(shí)觸發(fā)
},function(){
$(this).next().hide();//
鼠標(biāo)離開時(shí)觸發(fā)
})
})
/script
2、toggle函數(shù)
toggle(fn,fn)
每次點(diǎn)擊時(shí)切換要調(diào)用的函數(shù)。如果點(diǎn)擊了一個(gè)匹配的元素，則觸發(fā)指定的第一個(gè)函數(shù)，當(dāng)再次點(diǎn)擊同一元素時(shí)，則觸發(fā)指定的第二個(gè)函數(shù)。隨后的每次點(diǎn)擊都重復(fù)對這兩個(gè)函數(shù)的輪番調(diào)用。
可以使用unbind("click")來刪除。
復(fù)制代碼
代碼如下:
script
type="text/javascript"
$(function(){
$("#panel
h5.head").toggle(function(){
$(this).next().show();//
第一次點(diǎn)擊時(shí)觸發(fā)
},function(){
$(this).next().hide();//
第二次點(diǎn)擊時(shí)觸發(fā)，之后不停的切換
})
})
/script
toggle()
方法切換元素的可見狀態(tài)。
如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。toggle()方法切換元素的可見狀態(tài)。
如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。
所以上述的代碼還可以寫成：
復(fù)制代碼
代碼如下:
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樣式：
復(fù)制代碼
代碼如下:
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事件有了新的認(rèn)識了呢，希望本文能給大家?guī)硪恍椭?/p>
用了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的時(shí)候打開注釋 */
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
這個(gè)應(yīng)該用document.createElement?來實(shí)現(xiàn)
toggle應(yīng)該是js函數(shù)；
function?toggle(href){
//假定ID為toggleId
var?ele?=?document.getElementById('toggleId');
if(ele)ele.remove();
//然后增加一個(gè)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('某個(gè)css鏈接');//這樣調(diào)用就可以了
//1、獲取和設(shè)置樣式
$("#tow").attr("class");//獲取ID為tow的class屬性
$("#two").attr("class","divClass");//設(shè)置Id為two的class屬性。
//2、追加樣式
$("#two").addClass("divClass2");//為ID為two的對象追加樣式divClass2
//3、移除樣式
$("#two").removeClass("divClass");//移除?ID為two的對象的class名為divClass的樣式。
$(#two).removeClass("divClass?divClass2")移除多個(gè)樣式。
//4、切換類名
$("#two").toggleClass("anotherClass")?;//重復(fù)切換anotherClass樣式
//5、判斷是否含有某項(xiàng)樣式
$("#two").hasClass("another")==$("#two").is(".another");
//6、獲取css樣式中的樣式
$("div").css("color");//?設(shè)置color屬性值.?$(element).css(style)
//設(shè)置單個(gè)樣式
$("div").css("color","red");
//7設(shè)置多個(gè)樣式
$("div").css({fontSize:"30px",color:"red"});
$("div").css("height","30px")==$("div").height("30px");
$("div").css("width","30px")==$("div").height("30px");
沒看明白是想做什么呢？是要用toggle實(shí)現(xiàn)animate那段嗎？
toggle 只能切換隱藏和顯示狀態(tài)，不能做高度的修改的，可以用 toggleClass 實(shí)現(xiàn)，但沒有 animate 動(dòng)畫效果好。
.toggleClass( className )
在匹配的元素集合中的每個(gè)元素上添加或刪除一個(gè)或多個(gè)樣式類,取決于這個(gè)樣式類是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個(gè)類。
.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject) ] )
綁定兩個(gè)或多個(gè)處理程序綁定到匹配的元素，用來執(zhí)行在交替的點(diǎn)擊。
.animate( properties [, duration ] [, easing ] [, complete ] )
根據(jù)一組 CSS 屬性，執(zhí)行自定義動(dòng)畫。
重慶分公司
重慶分公司
