Я пытаюсь создать адаптивную навигационную панель со списком и javascript и @media. Когда я изменяю размер браузера до ~ 700 пикселей, элемент в стиле списка имеет вид «display: none», и появляется гамбургер-меню. Если я не нажимаю на гамбургер-меню, когда я изменяю размер браузера до нормального размера, список по-прежнему отображается встроенным блоком, но когда я нажимаю гамбургер-меню для отображения пункта меню в 'list-item', я все равно получаю список -item тип отображения, когда я изменяю размер своего браузера до нормального.

Я что-то пропустил?

function myFunction3() {

x = document.getElementsByClassName("li-tag");
    if (x[0].style.display === 'none'){
        for (index = 0; index<x.length; index++)
        {
            x[index].style.display = 'list-item';
        }
    } else {
        for (index = 0; index<x.length; index++)
        {
            x[index].style.display = 'none';
        }
    }

}

Мой @Media

@media (max-width: 700px){
    .toggle-button{
        display:block;
    }

    .li-tag {
        display:none;
    }
}

CSS панели навигации:

.tags{
    background: #0000cc;
    color:white;
    font-family: 'Alata', sans-serif;
    width: 100%;
    text-align: center;
}
.ul-tag {
    list-style-type:none;
    width: 70%;
    margin:auto;
    text-align: center;
}
.li-tag {
    display:inline-block;
    font-family: 'Alata', sans-serif;
    font-size:25px;
    margin-right: 10px;
}

HTML-код:

<div class ="tags" >
        <a href="#" class ="toggle-button" onclick = "myFunction3()">☰</a>
        <ul class = "ul-tag">
            <li class = "li-tag "><a href="#home">Home</a></li>
            <li class = "li-tag "><a href="#news">Type 1</a></li>
            <li class = "li-tag"><a href="#contact">Type 2</a></li>
            <li class = "li-tag "><a href="#about">Type 3</a></li>
            <li class = "li-tag "><a href="#about">Type 4</a></li>
            <li class = "li-tag "><a href="#about">Type 4</a></li>
            <li class = "li-tag "><a href="#about">Type 4</a></li>
            <li class = "li-tag "><a href="#about">Type 4</a></li>
            <li class = "li-tag "><a href="#about">Type 4</a></li>
</div>

Мой Код

Любой вклад приветствуется!

1
Tran Anh Tuan 1 Сен 2020 в 08:28

2 ответа

Лучший ответ

Css, применяемый с использованием js, является встроенным правилом , которое имеет более высокий приоритет, чем правила CSS в файле. Поэтому, когда вы установите list-item с помощью js, ваше правило inline-block больше не будет работать . Я предлагаю добавить класс к вашим элементам в js и управлять свойством display внутри класса.

Js:

function myFunction3() {

var x = document.getElementsByClassName("li-tag");
  for (index = 0; index<x.length; index++)
  {
    x[index].classList.toggle('list_view');
  }
}

Css:

@media (max-width: 700px){
    .toggle-button{
        display:block;
    }

    .li-tag {
        display:none;
    }
    /* new */
    .li-tag.list_view{
        display: list-item;
    }

}

JSFiddle

0
AbbasEbadian 1 Сен 2020 в 06:09

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

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Определите стили по пространственной ширине, заполнению и марже для тегов, ul-тегов и li-тегов в каждой группе.

0
Kawsar Hamid 1 Сен 2020 в 06:09