简单的导航不适用于移动浏览器

debugcn 发表于 Dev

拉明野生动物园

我有一个小于757px的分辨率的简单导航，如果我调整桌面浏览器的大小时可以使用引导程序和纯JavaScript，但它在移动浏览器中不起作用，即使在小提琴上也可以，但是在真正的移动浏览器中它不起作用（我已将项目上传到服务器）

现在它在桌面上不起作用或者我无法删除链接的d-none类

HTML代码

<html>


<head>
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>


<header>

 <div class="clearfix mx-3 my-2 d-md-none">
       <label class="float-left">
           <i class="fas fa-bars fa-2x p-1" role="button" id="sign-one" onclick="show()"></i>
           <i class="fas fa-times fa-2x d-none p-1" role="button" id="sign-two" onclick="hide()"></i>
        </label>
       </div>
       <div id="my-menu">
           <ul  class="list-unstyled d-none" id="links">
           <p><a href="/units" class="text-white">واحدها</a><p>
                            <p> <a href="/fruits" class="text-white">محصولات</a></p>
                             <p> <a href="/pages/درباره-ما" 
                             class="text-white">درباره ما</a></p>
                              <p> <a href="/all" class="text-white">اخبار</a></p>
                             <p> <a href="/contact" class="text-white">ارتباط با ما</a></p>
            </ul>
       </div>

</header>
</body>
</html>

的CSS

#my-menu{
            position: relative;
        }
      
        #links{
            position: absolute;
            padding: 30px 25px;
            border-radius: 7px;
            background-color:  #3CB371;
            text-align: center;
            color: white;
            transition:all .5s ease;
            z-index: 10;
        }

javascript

function show() { 
    document.getElementById("links").classList.toggle('d-none');
    document.getElementById('sign-one').classList.toggle('d-none');
document.getElementById('sign-two').classList.toggle('d-none');
}
function hide() {
  document.getElementById("links").classList.toggle('d-none');
   document.getElementById('sign-one').classList.toggle('d-none');
document.getElementById('sign-two').classList.toggle('d-none');
}

这是jsfiddle链接

先感谢您

拉哈德·拉曼（Rahad Rahman）

我已经稍微更改了您的代码。jsfiddle工作演示

的HTML

<html>
    <head>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
    </head>
    <body>
        <header>
            <div class="clearfix mx-3 my-2">
                <label class="float-left d-none">
                    <i class="fas fa-bars fa-2x p-1" role="button" id="sign-one" onclick="toggle()"></i>
                    <i class="fas fa-times fa-2x d-none p-1" role="button" id="sign-two" onclick="toggle()"></i>
                </label>
            </div>
            <div id="my-menu">
                <ul class="list-unstyled" id="links">
                    <li>
                        <a href="/units" class="text-white">واحدها</a>
                        <p></p>
                        <p><a href="/fruits" class="text-white">محصولات</a></p>
                        <p><a href="/pages/درباره-ما" class="text-white">درباره ما</a></p>
                        <p><a href="/all" class="text-white">اخبار</a></p>
                        <p><a href="/contact" class="text-white">ارتباط با ما</a></p>
                    </li>
                </ul>
            </div>
        </header>
    </body>
</html>

const navIcon = document.querySelector('.float-left')
const menu = document.querySelector('#my-menu')
const signOne = document.getElementById('sign-one');
const signTwo = document.getElementById('sign-two');

function toggle() {
    signOne.classList.toggle('d-none');
    signTwo.classList.toggle('d-none');
    menu.classList.toggle('d-none')
}

function responsive(e) {
    if (window.innerWidth < 757) {
        navIcon.classList.remove('d-none')
        menu.classList.add('d-none')

        // If sign-two not hidden then menu shown on less then 757px screen 
        if (!signTwo.classList.contains('d-none')) {
            menu.classList.remove('d-none')
        }
    } else {
        navIcon.classList.add('d-none')
        menu.classList.remove('d-none')
    }

}

window.addEventListener('resize', responsive);
window.addEventListener('load', responsive);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。