javascript - JavaScript 中的函数在 html 中不起作用

问题描述

我尝试编写我的第一个站点，但我不知道为什么 js 文件不起作用。

也许你可以修复它。我不能写那个，因为我正在学习编程。

此处为 HTML

<head>  

        <script type="text/javascript"> 

        </script>

        <meta charset="utf-8" />
        <title>Makoto Designer</title>

        <link rel="stylesheet" href="style.css" type="text/css" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="javas.js"></script>

</head>

<body>  
        <header>
                <div id="hed">
                <img src="/img/logo_okr.png" class="logo">
                <div class="biale"></div>
                <div class="czarne"></div>
                <img src="/img/md.png" class="md">
                </div>
        </header>
</body>

CSS在这里

.logo {
    display: inline-block;
    position: absolute;
    width: 155px;
    height: 155px;
    left: 50px;
    top: 50px;
    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.4));
    cursor: pointer;
    object-fit: cover;
    z-index: 3;
}

.md {
    display: inline-block;
    position: absolute;
    width: 532px;
    height: 190px;
    left: 230px;
    top: 18px;
    filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.4));
}


.czarne {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #00000099;
    z-index: 1;
}


.biale {
    position: absolute;
    background-color: #FFFFFF;
    left: 125px;
    top: 55px;
    width: 1px;
    height: 140px;
    z-index: 2;
    transition: 2s;
    transition-timing-function: ease-out;
}   

.biale.on {
    position: absolute;
    background-color: #FFFFFF;
    left: 125px;
    top: 50px;
    width: 650px;
    height: 155px;
    z-index: 2;
    border-bottom-right-radius: 75px;
    border-top-right-radius: 75px;
    filter: drop-shadow(0px 7px 10px #00000066);
}

此处为 JavaScript

function handleClicks() {
    var logo = $(".logo"),
        biale = $(".biale"),
        czarne = $(".czarne"),

        var menu = {
        open: () => {
            biale.addCalss("active");
            czarne.fadeTo("fast", 1, () => czarne.show());
        },
        close: () => {
            biale.removeClass("active");
            czarne.fadeTo("fast", 0, () => czarne.hide());
        }
        };

        logo.click(() => menu.open());
        czarne.click(() => {
            menu.close();
        });

}

addEventListener('DOMContentLoaded', () => {
    let biale = $(".biale")[0]
    let logo = $(".logo")[0]
    let toggle = false
    logo.addEventListener('clock', () => {
        toggle = !toggle
        biale.className = toggle ? 'on' : ""
    })
})

我想biale滑到后面logo然后隐藏，但是当我单击徽标时没有任何反应。为什么它不起作用？

嗯

标签： javascripthtmlcss

javascript - JavaScript 中的函数在 html 中不起作用

问题描述

我尝试编写我的第一个站点，但我不知道为什么 js 文件不起作用。

解决方案

推荐阅读