获取可折叠导航栏以在 Internet Explorer 中工作的问题

Question

我前几天制作的可折叠导航栏适用于Chrome，Firefox，Safari和Edge。它在IE浏览器中不起作用。

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

这是我的折叠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>