让可折叠导航栏在 Internet Explorer 中工作的问题答案

【问题标题】：Issue getting collapsible navbar to work in Internet Explorer让可折叠导航栏在 Internet Explorer 中工作的问题
【发布时间】：2019-09-10 00:30:19
【问题描述】：

我前几天制作的可折叠导航栏适用于 Chrome、Firefox、Safari 和 Edge。它在 Internet Explorer 中不起作用。

问题是导航栏的链接在导航栏折叠后仍然可见。因此正文内容覆盖在导航栏的链接之上。所有链接仍然可以点击。

这是我的折叠 javascript，没什么特别的。

<script>
    function openNav() {
        document.getElementById("menu").style.width = "20em";
        $("#footer").show();
    }

    function closeNav() {
        document.getElementById("menu").style.width = "0";
        document.getElementById("content").style.marginLeft = "0";
        $("#footer").hide();
    }

    function toggle() {
        var toggleButton = $("#toggleButton");

        if (toggleButton.attr('name') === 'open') {
            closeNav();
            toggleButton.attr('name','close');
        } else {
            openNav();
            toggleButton.attr('name','open');
        }
    }
</script>

【问题讨论】：

标签： html css internet-explorer

【解决方案1】：

我通过显示和隐藏包含链接的 div 解决了这个问题。

<script>
    function openNav() {
        document.getElementById("menu").style.width = "20em";
        $("#footer").show();
        $("#links").show();
    }

    function closeNav() {
        document.getElementById("menu").style.width = "0";
        document.getElementById("content").style.marginLeft = "0";
        $("#footer").hide();
        $("#links").hide();
    }

    function toggle() {
        var toggleButton = $("#toggleButton");

        if (toggleButton.attr('name') === 'open') {
            closeNav();
            toggleButton.attr('name','close');
        } else {
            openNav();
            toggleButton.attr('name','open');
        }
    }
</script>

【讨论】：

感谢您发布此问题的解决方案。我建议您尝试将自己的答案标记为该问题的可接受答案。它可以在未来帮助其他社区成员解决类似的问题。感谢您的理解。