при добалении класса с помощью javascript в DOM не отображается

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <header>
        <div class="humb" id="humb">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>

        <nav>
            <ul class="menu" id="menu">
                <li><a href="#">home</a></li>
                <li><a href="#">services</a></li>
                <li><a href="#">dead</a></li>
                <li><a href="#">indise</a></li>
                <li><a href="#">shadow</a></li>
            </ul>
        </nav>
    </header>
    <div class="slide" id="slide"></div>
    
    <script src="menu.js"></script>
</body>
</html>

/*css*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: rgb(242, 231, 231);
}
header {
    display: flex;
    padding: 10px 20px;
    border-bottom:1px solid rgb(199, 196, 196);
    background-color: #fff;
}
ul li {
    list-style: none;
}
nav li {
    display: inline-block;
}
nav a {
    text-decoration: none;
    text-transform:capitalize;
    font-family: Tahoma;
    margin-right: 15px;
    font-weight: 600;
    color: rgb(93, 92, 92);
    transition: color .3s linear;
}
nav a:hover {
    color: #000;
}

/*media*/
@media (max-width: 320px) {
    .menu {
        display: none;
    }
    .humb {
        padding: 3px;
        cursor: pointer;
        display: block;
    }
    .bar {
        display: block;
        width: 30px;
        height: 3px;
        margin-top: 6px;
        background-color: #000;
    }
    .slide {
        width: 180px;
        height: 200px;
        background-color: #fff;
        border-right: 1px solid rgb(199, 196, 196);
        border-bottom: 1px solid rgb(199, 196, 196);
        display: none;
    }
    .slide#menu {
        display: block;
    }
    
}
/*js*/
const humb = document.querySelector("#humb");
const menu = document.querySelector("#menu");
const slide = document.querySelector("#slide");

humb.addEventListener('click', humbHanler);

function humbHanler(e) {
    e.preventDefault();
    
    slide.classList.toggle('menu');
    
    slideShow();
}

function slideShow() {
    slide.appendChild(menu);
}

Answer 1

Потому что у вас в CSS у @media (max-width: 320px) .slide {...} и @media (max-width: 320px) .menu {} не изменяется display:none

Для решения ваш CSS должен выглядеть так:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: rgb(242, 231, 231);
}
header {
    display: flex;
    padding: 10px 20px;
    border-bottom:1px solid rgb(199, 196, 196);
    background-color: #fff;
}
ul li {
    list-style: none;
}
nav li {
    display: inline-block;
}
nav a {
    text-decoration: none;
    text-transform:capitalize;
    font-family: Tahoma;
    margin-right: 15px;
    font-weight: 600;
    color: rgb(93, 92, 92);
    transition: color .3s linear;
}
nav a:hover {
    color: #000;
}

/*media*/
@media (max-width: 320px) {
    .menu {
        display: none;
    }
    .humb {
        padding: 3px;
        cursor: pointer;
        display: block;
    }
    .bar {
        display: block;
        width: 30px;
        height: 3px;
        margin-top: 6px;
        background-color: #000;
    }
    .slide {
        width: 180px;
        height: 200px;
        background-color: #fff;
        border-right: 1px solid rgb(199, 196, 196);
        border-bottom: 1px solid rgb(199, 196, 196);
        display: none;
    }
    .slide.menu, .slide.menu .menu {
        display: block;
    }
    
}

Была добавлена секция

.slide.menu, .slide.menu .menu {
        display: block;
    }

вместо

.slide#menu {
        display: block;
    }

БЛОГ НА HUSL

при добалении класса с помощью javascript в DOM не отображается

Ответы (1 шт):