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>

使可折叠导航栏在Internet Explorer中工作的问题

1 个答案: