Почему JS работает на локальном хосте, а не в сети? - PullRequest
Новая
       16

Почему JS работает на локальном хосте, а не в сети?

0 голосов
/ 12 декабря 2018

Я работаю над проектом, где меню занимает всю страницу.Я помещаю все в include (из w3 включает в себя: https://www.w3schools.com/howto/howto_html_include.asp). Это хорошо работает на localhost (я использую python 3 на своем компьютере), но не когда я помещаю его на свой онлайн-сервер.

Менюсам использует JS, когда пользователь щелкает в любом месте страницы, закрывает меню.

Это мой код 

window.onload = function() {
  var input = document.getElementById('buttonOpen');
  var label = document.querySelector('label[for=buttonOpen]');
  document.addEventListener('click', function(e) {
    if (
      e.target !== input &&
      e.target !== label &&
      !(e.target.compareDocumentPosition(label) & Node.DOCUMENT_POSITION_CONTAINS)
    ) {
      input.checked = false;
    }
    label.classList.toggle('change', input.checked);
  });
}
#menu {
  width: 100%;
  height: 100%;
  background: #1b1b1b;
  margin-left: -100%;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  position: fixed;
  z-index: 999;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#buttonOpen:checked~#menu {
  margin-left: 0;
}

#buttonOpen {
  display: none;
}

#menuClosed #menu {
  margin-left: -100%;
}

.button-menu {
  display: inline-block;
  cursor: pointer;
  position: fixed;
  z-index: 1000;
  top: 2%;
  right: 2%;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
  background-color: #fff;
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
  background-color: #fff;
}

#menu ul {
  width: 100%;
  float: left;
  list-style: none;
  font-size: 30px;
  line-height: 80px;
  padding: 0;
}

#menu a {
  display: inline-block;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
}

.menuSocial {
  padding-top: 0 !important;
}

.menuSocial li {
  font-size: 25px;
  display: inline;
  margin-left: 5%;
}

.menuSocial li:first-child {
  margin-left: -2.5%;
}
<input id="buttonOpen" type="checkbox" />
<label for="buttonOpen">
        <div class="button-menu" onclick="openMenu(this)">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </div>
    </label>

<div id="menu">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li>
      <ul class="menuSocial">
        <li><a href="#"><i class="fas fa-envelope"></i></a></li>
        <li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
      </ul>
    </li>
  </ul>
</div>
...