如何解决：即使列表元素不起作用答案

【问题标题】：How to fix: even list elements not working如何解决：即使列表元素不起作用
【发布时间】：2019-07-31 14:59:48
【问题描述】：

我有一个无序列表，其中包含链接的列表元素，在一个隐藏的 div 中，当在页面中单击图标时将可见。列表变得可见，但只有奇数的列表元素有链接。

尝试了不同数量的列表元素，Chrome 和 Firefox 都不起作用。

HTML：

<div class="col-sm-1 " style="display:flex;justify-content:flex-end;align-items:center;position:relative;">
    <i onClick="ToggleMenu()" id="menuopen" class="fas fa-bars" style="cursor:pointer"></i>
</div>

<div class="container">
    <div class="menuinvisible" id="themenu" style="background-color:white;position: absolute;right: 10px;top: 62px;padding-right: 17px;">
        <ul>
            <li style="display:block">
                <a href="pages/contact.php">Contact 1</a>
            </li>
            <li style="display:block">
                <a href="pages/contact.php">Contact 2</a>
            </li>
            <li style="display:block">
                <a href="pages/contact.php">Contact 3</a>
            </li>
            <li style="display:block">
                <a href="pages/contact.php">Contact 4</a>
            </li>
        </ul>

    </div>
    <!--END MENU-->

</div>
<!--END CONTAINER-->

JS 切换<div class="menuinvisible" id="themenu"> 的可见性

function ToggleMenu(){
    document.getElementById('menuopen').classList.toggle('fa-bars');
    document.getElementById('menuopen').classList.toggle('fa-times');   

    document.getElementById('themenu').classList.toggle('menuvisible'); 
    document.getElementById('themenu').classList.toggle('menuinvisible');       
}

CSS：

.menuinvisible{
    display:none;   
}

.menuvisible{
    display:block;  
}

【问题讨论】：

标签： html css twitter-bootstrap list

【解决方案1】：

我很困惑，你想显示整个列表吗？还是只有有链接的元素？，如果你想显示它使用的所有元素：

function ToggleMenu(){
    document.getElementById('menuopen').classList.toggle('fa-bars');
    document.getElementById('menuopen').classList.toggle('fa-times');   

    document.getElementById('themenu').classList.toggle('menuvisible'); 
    document.getElementById('themenu').classList.toggle('menuinvisible');       
};


 document.querySelector('#menuopen').addEventListener('click', ToggleMenu);

【讨论】：