функция в JavaScript не работает это HTML - PullRequest
Новая
       5

функция в JavaScript не работает это HTML

0 голосов
/ 15 мая 2019

Я пытаюсь написать свой первый сайт, и я не знаю, почему файл 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 и затем скрылся,но когда я нажимаю на логотип, ничего не происходит.Почему это не работает?

Мех

Ответы [ 2 ]

0 голосов
/ 15 мая 2019

В вашем CSS измените .biale.on на .biale.active

Возможно, вы захотите обратиться за помощью к вашему HTML-файлу: https://www.w3schools.com/html/html5_intro.asp

Некоторые изменения, которые вы хотите сделать:

  1. Добавить тип документа
  2. Удалите этот пустой js-скрипт в голове для чистоты. Я предполагаю, что ваш JavaScript будет в файле javas.js.

Вот как может выглядеть ваш HTML: 

<!DOCTYPE html>
<html>
  <head>
    <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">
        <!-- Don't forget to close your img tags like this. Do the second one too. -->
        <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>
        <!-- Also close html at the end -->
</html>

В вашем файле javas.js попробуйте внести следующие изменения:

  1. Удалите запятую в конце последнего объявления var. Я убрал ярлык ниже.
  2. Произошла опечатка с addClass.
  3. Я не уверен, что вам нужен addEventListener. jQuery позволяет вам использовать функцию готовности документа для вызова функции handleClicks при загрузке, чтобы настроить фейды.

Вот пример: 

function handleClicks() {
  var logo = $(".logo");
  var biale = $(".biale");
  var czarne = $(".czarne");
  var menu = {
      open: () => {
          biale.addClass("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();
  });
}
$(document).ready(function(){
  handleClicks();
});
0 голосов
/ 15 мая 2019

Поместите <script> внизу тега тела (не в голове) - и также поставьте точку с запятой после czarne = $(".czarne"); (не запятая ,)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...