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

Question

我前几天制作的可折叠导航栏适用于 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>

Answer 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>