Форум

DenisZ · #1 (**permalink**) 22.01.2023, 09:58

Здравствуйте!
Есть HTML-документ:

<!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">
    <link rel="stylesheet" href="style.css">
    <script src="jquery-3.6.3.js"></script>
    <script src="index.js"></script>  
    <title>Document</title>
</head>
<body>
    
    <div class="cont1">
        <div class="cont22" ><button id="b_open">Open</button></div>
    <div class="cont44"></div>
    <div class="cont33"><button id="b_open">Open</button></div>
        </div>
   <div class="cont5">
        <div class="cont2"></div>
        <div class="cont4"></div>
        <div class="cont3"></div>
</div> 
<button id="b_close">Close</button>

</body>
</html>

Есть CSS-стили:

Код:

.cont1{
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-top:7%;
    padding: 1%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.099), rgb(255, 255, 255));
    border-radius: 7px;
    display:flex; 
    flex-direction: row;
    justify-content:space-evenly;
    z-index: 1;
}
.cont22,
.cont33{
    height: 200px;
    width:300px;
    padding: 20px;
    width:30%;
    display:inline-flex;
    flex-direction: row;
    justify-content:space-evenly;

    
}
.cont2,
.cont3{
    height: 200px;
    width:  300px;
    padding: 20px;
    display:inline-flex;
    flex-direction: row;
    background-color: blueviolet;
    justify-content: right;

}
.cont44{
    width: 10%;
    height: 100%;
    display:inline-flex;
    justify-content:space-evenly;

    
}
.cont4{
    width: 10%;
    height: 100%;
    display:inline-flex;
    justify-content:space-evenly;
    
}

.cont5{
    width:100%; 
    margin-top:-14%; 
    display:flex; 
    flex-direction: row;
    align-items: center; 
    justify-content:space-evenly;
    z-index: 2;
}


#b_open{
    height: 30px;
    cursor: pointer;
    background-color: red;
    color: black;
}

#b_close{
    height: 30px;
    border: none;
    background-color: black;
    color: white;
    cursor: pointer;   
}

Есть также JQuery:

$('#b_close').click(function(){
    $('.cont2, .cont3, .cont4').hide();
})

Явных ошибок VSCode не выдает, однако JQuery не работает.
ПОЧЕМУ?

voraa · #2 (**permalink**) 22.01.2023, 12:25

А неявные ошибки?
У вас index.js начинает работать до того, как парсер разобрал html код. И еще нет никакого элемента #b_close
Либо свой скрипт вставляйте в конец <body>,
Либо он должен быть таким

$(() => {
    $('#b_close').click(function(){
        $('.cont2, .cont3, .cont4').hide();
    })
})

DenisZ · #3 (**permalink**) 23.01.2023, 19:23

Большое спасибо!

Форум

Справочник

Discord чат

Курсы javascript