Question

我正在尝试在我的页面中展开左侧面板功能，该页面具有左侧和右侧导航面板。左侧面板折叠但未设置新的容器类。结构如下所示：

<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不接受两个类名作为旧浏览器的参数（＆lt; = IE9），至少我认为问题是这样。有人能告诉我这里发生了什么吗？这似乎适用于最新的chrome和IE＆gt;第9版

Answer 1

我猜您的问题是cont.classList not being supported by IE9 or older

querySelector不适用于IE 9

1 个答案: