Question

我正在尝试创建一个响应式网页，例如显示随屏幕大小而变化的情况。

我有以下HTML：

            <div class="responsive_menu" id="resp_Menu" onClick="fnResponsiveMenu()">
            </div>

            <div class="nav_wrapper">
                <div class="navigation" id="navMenu1">
                    <a href="Home.aspx">Contact Us</a>
                </div>

                <div class="navigation" id="navMenu2">
                    <a href="Home.aspx">Information</a>
                </div>

                <div class="navigation" id="navMenu3">
                    <a href="Home.aspx">Venue Details</a>
                </div>

                <div class="navigation" id="navMenu4">
                    <a href="Home.aspx">Registration & Payment</a>
                </div>      

                <div class="navigation" id="navMenu5">
                    <a href="Home.aspx">Agenda</a>
                </div>

                <div class="navigation" id="navMenu6">
                    <a href="Home.aspx">Home</a>
                </div>

            </div>

以及respond.css中的以下内容：

.navigation {
    width:100%;
    background-color:#3171B7;
    border-bottom:1px solid #ffffff;
    margin:0;   
    text-transform:uppercase;
    font-size:16px;
    height:40%;
    padding-top:10px;   
    display:none;
}

以及style.css中的以下内容：

.navigation {
    float:right;
    margin:30px 0px 1px 0px;
    height:25px;
    width:100px;    
    display:block;
}


.navigation a
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    text-decoration: none;
    display:block;
    padding:0 5px;
    height:30px;
}

以及以下JavaScript：

var oNavChecker = 0;

function fnResponsiveMenu()
{
    if(oNavChecker == 0 )
    {
        var oNav1 = document.getElementById("navMenu1");
        oNav1.setAttribute('style', 'display:inline');

        var oNav2 = document.getElementById("navMenu2");
        oNav2.setAttribute('style', 'display:inline');

        var oNav3 = document.getElementById("navMenu3");
        oNav3.setAttribute('style', 'display:inline');

        var oNav4 = document.getElementById("navMenu4");
        oNav4.setAttribute('style', 'display:inline');

        var oNav5 = document.getElementById("navMenu5");
        oNav5.setAttribute('style', 'display:inline');

        var oNav6 = document.getElementById("navMenu6");
        oNav6.setAttribute('style', 'display:inline');

        oNavChecker = 1;
        return;
    }

    if(oNavChecker == 1 )
    {
        var oNav1 = document.getElementById("navMenu1");
        oNav1.setAttribute('style', 'display:none');

        var oNav2 = document.getElementById("navMenu2");
        oNav2.setAttribute('style', 'display:none');

        var oNav3 = document.getElementById("navMenu3");
        oNav3.setAttribute('style', 'display:none');

        var oNav4 = document.getElementById("navMenu4");
        oNav4.setAttribute('style', 'display:none');

        var oNav5 = document.getElementById("navMenu5");
        oNav5.setAttribute('style', 'display:none');

        var oNav6 = document.getElementById("navMenu6");
        oNav6.setAttribute('style', 'display:none');

        oNavChecker = 0;
        return;
    }

}

一切正常，表现得很好。

我的问题是，一旦屏幕缩小，然后按下菜单按钮，例如fnResponsiveMenu()已经：

按下

首先显示菜单

然后再次按下以将其删除

然后屏幕返回宽分辨率，

navMenus不再显示了。

我确信这是因为CSS被javascript过度了，例如：

oNav1.setAttribute('style', 'display:none');

那么如何解决这个问题并让style.CSS覆盖JavaScript应用的更改？

如果无法做到这一点，是否有人可以提出另一种方法来实现制作响应式菜单的目的？

Answer 1

我无法发表评论，也没有代表，所以我会在答案中提出来......

你读过这个吗？ Remove inline css of an HTML elements

删除内联样式后，将再次应用css文件中的默认值。

覆盖element.style

1 个答案: