0
我想崩潰展開左頁面功能在我的頁面有左和右導航面板。左側面板摺疊,但未設置新的容器類。該結構是這樣的:querySelector不適用於IE 9
<div class="contentContainer">
<div class="leftNavPanel">
<div>
</div>
</div>
<div class="openClose" id="openClose">
<div class="leftPanelClose">
<a class="expandCollapseAnchor" href="javascript:collapseExpand()"><i class="fa fa-angle-double-left" id="expandCollapseIcon"></i></a>
</div>
</div>
<div class="rightNavPanel">
<div>
</div>
</div>
<div class="clearBoth"></div>
</div>
我的JavaScript看起來是這樣的:
function collapseExpand(){
var left = document.querySelector("div.leftNavPanel");
var oc = document.querySelector("div.openClose");
var rP = document.querySelector("div.rightNavPanel");
var cont = document.querySelector(".contentContainer, .contentContainerNoLeftNavPanel");
var ic = document.getElementById("expandCollapseIcon");
if (left.style.display!="none")
{
left.style.display="none";
oc.style.marginLeft="0px";
rP.style.marginLeft="20px";
cont.classList.add("contentContainerNoLeftNavPanel");
cont.classList.remove("contentContainer");
ic.classList.remove("fa-angle-double-left");
ic.classList.add("fa-angle-double-right");
}
else
{
left.style.display="block";
oc.style.marginLeft="290px";
rP.style.marginLeft="310px";
cont.classList.add("contentContainer");
cont.classList.remove("contentContainerNoLeftNavPanel");
ic.classList.remove("fa-angle-double-right");
ic.classList.add("fa-angle-double-left");
}
}
唯一的問題是,querySelector不接受兩個類名稱爲至少舊的瀏覽器(< = IE9)參數這就是我認爲的問題所在。有人能告訴我這裏發生了什麼嗎?這似乎很好地工作與最新的Chrome和IE>版本9
啊,我只是想通了這一點。我使用+ =來添加類。我如何刪除類? – 2014-08-28 19:10:21
看看[使用簡單的跨瀏覽器JavaScript添加和刪除類](http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript/196038#196038) – Volune 2014-08-28 19:14:11