<html>
//由於IE的區別也可能造成聲明無效,於是奇耙的聲明方式就有了
//這但不但不會影響也十分的可靠,至於下面爲什麼要再次聲明
//因爲有時間你的IIS或者環境根本不是IIS那麼這面的就會失效
//但一般不會,下面的的UTF-8聲明就是用來解決這上面不可用的可能性
//那麼如果兩次都是執行了會有什麼影響呢，答案是沒有。
//先聲明瞭 ZH-CN 簡體中文後只指向UTF-8是不會有錯誤的結果的
//那麼直接指向UTF-8不就可以了嗎？答案是不可以，因爲有的破服務器
//的問題UTF-8的支持範圍比較廣，假如錯誤的認爲你打的是韓文，那麼顯示出來的只能是以下形式
//（涓€у寲閰嶇疆）即亂碼，個人是這麼解決的，也不知道我的理解是否正確，但那麼多年來
//我一直是那麼解決的，至少我認爲是可靠對的即使別人沒那麼做，但我認爲解決了沒有BUG那麼就是我們想要的
//那麼爲什麼win v~win8之間不會呢，因爲系統只能越做越好，測試結果就是這樣了 Ps:腦殘人士哈哈^_^~~~~
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie6" lang="zh-cn"><![endif]-->
<!--[if IE 7 ]><html class="ie7" lang="zh-cn"><![endif]-->
<!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]-->
<!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="" lang="zh-cn"><!--<![endif]-->
<head>
//聲明編碼,但有時也會出現各種奇耙情況比如IE的版本等!
//由於服務器的兼容問題還有字集原因有時間UTF-8不一定能用,可以考慮GB2312
//但這樣的話港澳臺的話可能出現問題。
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>多級菜單</title>
<script type="text/javascript" src="jquery-2.0.1.js"></script>
</head>
<style type="text/css">
*{margin:0;padding:0;}
li{list-style: none;}
.icoopen , .icoopen2 , .icoclose , .icoclose2 , .iconleaf , .iconleaf2 ,.lmenu ul li span{background: url("doc.png") no-repeat 0 0;width: 9px;height: 9px;top: 9px;}
em {display: block;position: absolute;cursor: pointer;}
.icoopen{left: 28px;background-position: 0 -39px;}
.icoopen2{left: 42px;background-position: -46px -88px;}
.icoclose{left: 28px;background-position: -45px -39px;}
.icoclose2{left: 42px;background-position: 0 -88px;}
.iconleaf , .iconleaf2{width: 3px;height: 5px;background-position: -87px -41px;}
.iconleaf {left: 47px;top: 11px;}
.iconleaf2 {left: 72px;top: 10px;}
.lmenu{
margin: 50px 200px;
width: 250px;
height: auto;
overflow: hidden;
font-family: Tahoma, Helvetica, "Microsoft Yahei", "微軟雅黑", Arial, STHeiti;
margin-bottom: 10px;
border: 1px solid #AEB1B5;
}
.lmenu ul li{
position: relative;
cursor: pointer;
}
.lmenu ul li span{
display: block;
width: 100%;
height: 28px;
line-height: 28px;
text-indent: 3em;
/*font-weight: bolder;*/
font-size: 14px;
color: #0E3E5E;
border-bottom: 1px solid #D7D7D7;
background-position: -46px 0;
}
.lmenu ul li ul li , .lmenu ul li ul li span{
background-color: #F7F8F8;
color: #333;
text-indent: 5em;
font-size: 13px;
height: auto;
line-height: 28px;
}
.lmenu ul li ul li span{
background:none;
}
.lmenu ul li ul li ul li{
border:none;
text-indent: 7em;
font-size: 12px;
font-weight: normal;
height: 24px;
line-height: 24px;
}
</style>
<body>
<div class="lmenu">
<ul>
<li>
<span>一級菜單</span>
<ul>
<li>
<span>基本</span>
<ul>
<li>全屏</li>
<li>源碼</li>
</ul>
</li>
<li>
<span>格式化</span>
<ul>
<li>全生生死死屏</li>
<li>源碼</li>
</ul>
</li>
<li>個性化配置</li>
</ul>
</li>
<li>
<span>2級菜單</span>
<ul>
<li>我是2級菜單下面的</li>
<li>我是2級菜單下面的</li>
<li>我是2級菜單下面的</li>
<li>我是2級菜單下面的</li>
</ul>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
/*一級菜單的樣式*/
$(".lmenu > ul > li > span").prepend('<em class="icoclose"></em>');
/*二級菜單的樣式*/
$(".lmenu > ul > li > ul > li").each(function(){
/*檢查是否有節點*/
span = $(this).find("span");
if ( span.length ){
span.prepend('<em class="icoclose2"></em>');
}else{
$(this).prepend('<em class="iconleaf"></em>')
}
});
/*三級菜單的樣式*/
$(".lmenu > ul > li > ul > li > ul > li").click(function(){
alert($(this).text());
}).prepend('<em class="iconleaf2"></em>');
$(".lmenu ul li span").click(function(){
var ye = $(this).find('em');
classNama = ye.attr("class");
if( classNama == 'icoclose'){ye.attr('class','icoopen');}
else if( classNama == 'icoopen' ){ye.attr('class','icoclose');}
else if( classNama == 'icoclose2'){ye.attr('class','icoopen2');}
else if( classNama == 'icoopen2' ){ye.attr('class','icoclose2');}
$(this).siblings("ul").slideToggle("normal","swing");
});
});
</script>
</html>記錄 頁面編碼問題
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章