Простая навигация не работает в мобильном браузере

У меня есть простая навигация для разрешения менее 757 пикселей. Я использовал бутстрап и чистый 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

заранее спасибо

Не могли бы вы уточнить ваше требование? Вы хотите, чтобы раскрывающаяся навигация отображалась по умолчанию на рабочем столе и скрывалась при разрешении менее 757 пикселей?

— 09.12.2020 18:32

последний комментарий этой ссылки помог мне https://stackoverflow.com/questions/52751435/jquery-show-won‌t-turn-bootstrap-d-n‌one-class-visible

— 10.12.2020 06:52

javascript html css bootstrap-4

09.12.2020 17:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

131

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Удалить d-md-none из <div class = "clearfix mx-3 my-2 d-md-none">

спасибо @John, но я не хочу, чтобы полосы (значок fontawesome) отображались в разрешении md, только в разрешении xs и sm

— 09.12.2020 17:52

09.12.2020 17:49

Ответ принят как подходящий

Я немного изменил ваш код. рабочая демонстрация 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);

спасибо @rahad, этот код добавляет дополнительное белое видимое пространство при обычной навигации, когда разрешение выше 757.

— 10.12.2020 06:51

Затем вы должны удалить `mx-3 my-2` из div-оболочки значков, то есть: clearfix div. Затем добавьте эти классы во внутренний тег label.

— 10.12.2020 15:24

спасибо @Rahad, я принимаю ваш ответ, в любом случае классы свертывания начальной загрузки более эффективны, чем использование d-none и javascript, чтобы получить то, что я намеревался, спасибо за то, что вы поделились своими знаниями

— 10.12.2020 15:30

09.12.2020 19:25