Javascript 尝试循环使用'；getElementsByClassName'；

我试图在Javascript中使用GetElementsByCassName。我知道我需要使用一个循环，以使其工作，但我不知道如何。我只需要在“showLeft”类中使用它。所有其他人都可以保持原样。这是我的JS：

var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
        menuRight = document.getElementById( 'cbp-spmenu-s2' ),
        menuTop = document.getElementById( 'cbp-spmenu-s3' ),
        menuBottom = document.getElementById( 'cbp-spmenu-s4' ),

        showLeft = document.getElementsByClassName( 'showLeft' ),

        showRight = document.getElementById( 'showRight' ),
        showTop = document.getElementById( 'showTop' ),
        showBottom = document.getElementById( 'showBottom' ),
        showLeftPush = document.getElementById( 'showLeftPush' ),
        showRightPush = document.getElementById( 'showRightPush' ),
        body = document.body;

showLeft.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( menuLeft, 'cbp-spmenu-open' );
    disableOther( 'showLeft' );
};
showRight.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( menuRight, 'cbp-spmenu-open' );
    disableOther( 'showRight' );
};
showTop.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( menuTop, 'cbp-spmenu-open' );
    disableOther( 'showTop' );
};
showBottom.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( menuBottom, 'cbp-spmenu-open' );
    disableOther( 'showBottom' );
};
showLeftPush.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( body, 'cbp-spmenu-push-toright' );
    classie.toggle( menuLeft, 'cbp-spmenu-open' );
    disableOther( 'showLeftPush' );
};
showRightPush.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( body, 'cbp-spmenu-push-toleft' );
    classie.toggle( menuRight, 'cbp-spmenu-open' );
    disableOther( 'showRightPush' );
};

function disableOther( button ) {
    if( button !== 'showLeft' ) {
        classie.toggle( showLeft, 'disabled' );
    }
    if( button !== 'showRight' ) {
        classie.toggle( showRight, 'disabled' );
    }
    if( button !== 'showTop' ) {
        classie.toggle( showTop, 'disabled' );
    }
    if( button !== 'showBottom' ) {
        classie.toggle( showBottom, 'disabled' );
    }
    if( button !== 'showLeftPush' ) {
        classie.toggle( showLeftPush, 'disabled' );
    }
    if( button !== 'showRightPush' ) {
        classie.toggle( showRightPush, 'disabled' );
    }
}

非常感谢

另一个问题： 当我在这里的时候，我想我还可以问另外一个问题

此代码用于非画布导航菜单，我已将其设置为显示在屏幕右侧。我正在使用“菜单右键”菜单和“左键移动”按钮。一切都很好，除了我希望当用户点击页面主体时导航菜单消失。我该怎么做？

您可以这样做：

var a=document.getElementsByClassName('menuRight');
for(var i=0;i<a.length;i++)
{
  //do stuff. to access the elements use a[i]
}

var a=document.getElementsByClassName（'menuRight'）；
对于（var i=0；i如果所有“showLeft”元素都在同一父元素中，则在父元素上添加单击处理程序并检查currentTarget属性

否则，您可能需要迭代从getElementsByClassName返回的列表中的每个元素，但是这有点低效

您可以在此处阅读更多内容：
有点困惑。这是针对第一个问题还是第二个问题？如果是第一个问题，您是指“showLeft”而不是“menuRight”？对于第二个问题，假设您希望在用户单击menuRight而不是使用Jquery选择器时隐藏menuRight。下面是指向它的链接：好的，那么我在哪里将此代码集成到我的代码中，然后在//do stuff区域中实际需要放置什么？返回一个，而不是一个数组。