Складные кнопки не работают на мобильном устройстве - PullRequest
0 голосов
/ 05 апреля 2020

Я делаю простой сайт и у меня три складные кнопки. Каждый показывает код самого сайта. Они открываются при нажатии на P C, но не открываются при нажатии на мобильном телефоне. Все, что происходит, это то, что кнопка подсвечивается. Вот код, который я использую.

Javascript:

  <script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

Это CSS:

.collapsible {
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: center;
    outline:none;
    font-size: 15px;
    font-family: sans-serif;

}

.active, .collapsible:hover {
    background-color: rgb(7, 6, 6);
    cursor: pointer;
}

.content {
    padding: 18px;
    display: none;
    overflow: hidden;
    cursor: pointer;
}

И это html :

<body>
<button type="button" class="collapsible">CSS</button>
<div class="content">
     contents
</div>
<button type="button" class="collapsible">HTML</button>
<div class="content">
     contents2
</div>
<button type="button" class="collapsible">JavaScript</button>
<div class="content">
     contents3
</div>
</body>

Я пытался добавить обработчик сенсорного запуска к Javascript, но это не работает. Спасибо за вашу помощь. Я прошу прощения, если это очевидный ответ, я новичок в веб-сайтах.

Ответы [ 2 ]

0 голосов
/ 05 апреля 2020

Это не было проблемой с кодом, мне просто нужно было опубликовать sh веб-сайт для доступа к нему на моем телефоне. Это была проблема с локальным размещением файла. Спасибо всем за ответы и помощь.

0 голосов
/ 05 апреля 2020

Ваша HTML структура нарушена. Вы забыли открыть второй элемент div.

Таким образом, ваш HTML должен быть:

<body>
  <button type="button" class="collapsible">CSS</button>
  <div class="content">
       contents
  </div>
  <button type="button" class="collapsible">HTML</button>
  <div class="content">
       contents2
  </div>
  <button type="button" class="collapsible">JavaScript</button>
  <div class="content">
       contents3
  </div>
</body>

И я добавил несколько цветов для ваших шрифтов:

.collapsible {
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: center;
    outline:none;
    font-size: 15px;
    font-family: sans-serif;
    color: #000000;
}

.active, .collapsible:hover {
    background-color: rgb(7, 6, 6);
    cursor: pointer;
    color: #ffffff;
}

.content {
    padding: 18px;
    display: none;
    overflow: hidden;
    cursor: pointer;
}

Рабочий пример для jsfiddle

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