Не работает onclick js в Apple устройствах

Рейтинг: -1Ответов: 1Опубликовано: 14.02.2023

HTML код (здесь использую плагин CFS, данные берутся с админки)

<div class="faq-box">
        <div class="column">

            <?php
            $faqQuestAnsw = CFS()->get('faq-left');
            $count = 1;
            foreach ($faqQuestAnsw as $question) {
            ?>

                <div class="question-answer">
                    <div class="question question-<?php echo $count; ?>" onclick="">
                        <span><?php echo $question['faq-left-question']; ?></span>
                        <div class="plus-minus">
                            <div class="line-horizontal"></div>
                            <div class="line-vertical line-vertical-<?php echo $count; ?>"></div>
                        </div>
                    </div>
                    <div class="answer answer-<?php echo $count; ?>"><?php echo $question['faq-left-answer']; ?></div>
                </div>

            <?php $count = $count + 1;
            } ?>


        </div>
        <div class="column">

            <?php
            $faqQuestAnsw = CFS()->get('faq-right');
            $count = 6;
            foreach ($faqQuestAnsw as $question) {
            ?>

                <div class="question-answer">
                    <div class="question question-<?php echo $count; ?>" onclick="">
                        <span><?php echo $question['faq-right-question']; ?></span>
                        <div class="plus-minus">
                            <div class="line-horizontal"></div>
                            <div class="line-vertical line-vertical-<?php echo $count; ?>"></div>
                        </div>
                    </div>
                    <div class="answer answer-<?php echo $count; ?>"><?php echo $question['faq-right-answer']; ?></div>
                </div>

            <?php $count = $count + 1;
            } ?>


        </div>
    </div>

CSS:

.question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor:pointer;
}

JS (извините за длинный код, но по сути все десять блоков повторяются, в JS новичок, если кто знает как можно сократить код, подскажите пож):

/* ===================================1============================================= */
if (document.querySelector('.answer-1')?.innerHTML) {
  let descrheight = document.querySelector('.answer-1').scrollHeight + 20;

  function openAnswer() {
    if (descrheight == 0) {
      document.querySelector('.answer-1').style.maxHeight = '0px';
      descrheight = document.querySelector('.answer-1').scrollHeight;
      document.querySelector('.answer-1').classList.remove('answer-active-1');
      document.querySelector('.line-vertical-1').classList.remove('line-vertical-deactive-1');
    }
    else {
      document.querySelector('.answer-1').style.maxHeight = descrheight + 'px';
      document.querySelector('.answer-1').classList.toggle('answer-active-1');
      document.querySelector('.line-vertical-1').classList.toggle('line-vertical-deactive-1');
      descrheight = 0;
    }
return false;
  }
  document.querySelector('.question-1').addEventListener("click", openAnswer);
}
/* ===================================2============================================= */
if (document.querySelector('.answer-2')?.innerHTML) {
  let descrheight = document.querySelector('.answer-2').scrollHeight + 20;

  function openAnswer() {
    if (descrheight == 0) {
      document.querySelector('.answer-2').style.maxHeight = '0px';
      descrheight = document.querySelector('.answer-2').scrollHeight;
      document.querySelector('.answer-2').classList.remove('answer-active-2');
      document.querySelector('.line-vertical-2').classList.remove('line-vertical-deactive-2');
    }
    else {
      document.querySelector('.answer-2').style.maxHeight = descrheight + 'px';
      document.querySelector('.answer-2').classList.toggle('answer-active-2');
      document.querySelector('.line-vertical-2').classList.toggle('line-vertical-deactive-2');
      descrheight = 0;
    }

  }
  document.querySelector('.question-2').addEventListener("click", openAnswer);
}
/* ===================================3============================================= */
if (document.querySelector('.answer-3')?.innerHTML) {
  let descrheight = document.querySelector('.answer-3').scrollHeight + 20;

  function openAnswer() {
    if (descrheight == 0) {
      document.querySelector('.answer-3').style.maxHeight = '0px';
      descrheight = document.querySelector('.answer-3').scrollHeight;
      document.querySelector('.answer-3').classList.remove('answer-active-3');
      document.querySelector('.line-vertical-3').classList.remove('line-vertical-deactive-3');
    }
    else {
      document.querySelector('.answer-3').style.maxHeight = descrheight + 'px';
      document.querySelector('.answer-3').classList.toggle('answer-active-3');
      document.querySelector('.line-vertical-3').classList.toggle('line-vertical-deactive-3');
      descrheight = 0;
    }

  }
  document.querySelector('.question-3').addEventListener("click", openAnswer);
}
/* ===================================4============================================= */
if (document.querySelector('.answer-4')?.innerHTML) {
  let descrheight = document.querySelector('.answer-4').scrollHeight + 20;

  function openAnswer() {
    if (descrheight == 0) {
      document.querySelector('.answer-4').style.maxHeight = '0px';
      descrheight = document.querySelector('.answer-4').scrollHeight;
      document.querySelector('.answer-4').classList.remove('answer-active-4');
      document.querySelector('.line-vertical-4').classList.remove('line-vertical-deactive-4');
    }
    else {
      document.querySelector('.answer-4').style.maxHeight = descrheight + 'px';
      document.querySelector('.answer-4').classList.toggle('answer-active-4');
      document.querySelector('.line-vertical-4').classList.toggle('line-vertical-deactive-4');
      descrheight = 0;
    }

  }
  document.querySelector('.question-4').addEventListener("click", openAnswer);
}
/* ===================================5============================================= */
if (document.querySelector('.answer-5')?.innerHTML) {
  let descrheight = document.querySelector('.answer-5').scrollHeight + 20;

  function openAnswer() {
    if (descrheight == 0) {
      document.querySelector('.answer-5').style.maxHeight = '0px';
      descrheight = document.querySelector('.answer-5').scrollHeight;
      document.querySelector('.answer-5').classList.remove('answer-active-5');
      document.querySelector('.line-vertical-5').classList.remove('line-vertical-deactive-5');
    }
    else {
      document.querySelector('.answer-5').style.maxHeight = descrheight + 'px';
      document.querySelector('.answer-5').classList.toggle('answer-active-5');
      document.querySelector('.line-vertical-5').classList.toggle('line-vertical-deactive-5');
      descrheight = 0;
    }

  }
  document.querySelector('.question-5').addEventListener("click", openAnswer);
}
/* ===================================6============================================= */
if (document.querySelector('.answer-6')?.innerHTML) {
  let descrheight = document.querySelector('.answer-6').scrollHeight + 20;

  function openAnswer() {
    if (descrheight == 0) {
      document.querySelector('.answer-6').style.maxHeight = '0px';
      descrheight = document.querySelector('.answer-6').scrollHeight;
      document.querySelector('.answer-6').classList.remove('answer-active-6');
      document.querySelector('.line-vertical-6').classList.remove('line-vertical-deactive-6');
    }
    else {
      document.querySelector('.answer-6').style.maxHeight = descrheight + 'px';
      document.querySelector('.answer-6').classList.toggle('answer-active-6');
      document.querySelector('.line-vertical-6').classList.toggle('line-vertical-deactive-6');
      descrheight = 0;
    }

  }
  document.querySelector('.question-6').addEventListener("click", openAnswer);
}
/* ===================================7============================================= */
if (document.querySelector('.answer-7')?.innerHTML) {
  let descrheight = document.querySelector('.answer-7').scrollHeight + 20;

  function openAnswer() {
    if (descrheight == 0) {
      document.querySelector('.answer-7').style.maxHeight = '0px';
      descrheight = document.querySelector('.answer-7').scrollHeight;
      document.querySelector('.answer-7').classList.remove('answer-active-7');
      document.querySelector('.line-vertical-7').classList.remove('line-vertical-deactive-7');
    }
    else {
      document.querySelector('.answer-7').style.maxHeight = descrheight + 'px';
      document.querySelector('.answer-7').classList.toggle('answer-active-7');
      document.querySelector('.line-vertical-7').classList.toggle('line-vertical-deactive-7');
      descrheight = 0;
    }

  }
  document.querySelector('.question-7').addEventListener("click", openAnswer);
}
/* ===================================8============================================= */
if (document.querySelector('.answer-8')?.innerHTML) {
  let descrheight = document.querySelector('.answer-8').scrollHeight + 20;

  function openAnswer() {
    if (descrheight == 0) {
      document.querySelector('.answer-8').style.maxHeight = '0px';
      descrheight = document.querySelector('.answer-8').scrollHeight;
      document.querySelector('.answer-8').classList.remove('answer-active-8');
      document.querySelector('.line-vertical-8').classList.remove('line-vertical-deactive-8');
    }
    else {
      document.querySelector('.answer-8').style.maxHeight = descrheight + 'px';
      document.querySelector('.answer-8').classList.toggle('answer-active-8');
      document.querySelector('.line-vertical-8').classList.toggle('line-vertical-deactive-8');
      descrheight = 0;
    }

  }
  document.querySelector('.question-8').addEventListener("click", openAnswer);
}
/* ===================================9============================================= */
if (document.querySelector('.answer-9')?.innerHTML) {
  let descrheight = document.querySelector('.answer-9').scrollHeight + 20;

  function openAnswer() {
    if (descrheight == 0) {
      document.querySelector('.answer-9').style.maxHeight = '0px';
      descrheight = document.querySelector('.answer-9').scrollHeight;
      document.querySelector('.answer-9').classList.remove('answer-active-9');
      document.querySelector('.line-vertical-9').classList.remove('line-vertical-deactive-9');
    }
    else {
      document.querySelector('.answer-9').style.maxHeight = descrheight + 'px';
      document.querySelector('.answer-9').classList.toggle('answer-active-9');
      document.querySelector('.line-vertical-9').classList.toggle('line-vertical-deactive-9');
      descrheight = 0;
    }

  }
  document.querySelector('.question-9').addEventListener("click", openAnswer);
}
/* ===================================10============================================= */
if (document.querySelector('.answer-10')?.innerHTML) {
  let descrheight = document.querySelector('.answer-10').scrollHeight + 20;

  function openAnswer() {
    if (descrheight == 0) {
      document.querySelector('.answer-10').style.maxHeight = '0px';
      descrheight = document.querySelector('.answer-10').scrollHeight;
      document.querySelector('.answer-10').classList.remove('answer-active-10');
      document.querySelector('.line-vertical-10').classList.remove('line-vertical-deactive-10');
    }
    else {
      document.querySelector('.answer-10').style.maxHeight = descrheight + 'px';
      document.querySelector('.answer-10').classList.toggle('answer-active-10');
      document.querySelector('.line-vertical-10').classList.toggle('line-vertical-deactive-10');
      descrheight = 0;
    }

  }
  document.querySelector('.question-10').addEventListener("click", openAnswer);
}

Проблема в том, что только на Apple устройствах не работает onclick, по нажатию на елемент question-1,2,3...На остальных устройствах всё корректно работает. На айфоне также установлен хром и тоже не работает, т.е. проблема не в Сафари. Хотя онклик на бургер-меню и на поиске на этом же сайте работает. Подскажите, пожалуйста, где копать?

css javascript html iphone apple
Источник: Stack Overflow на русском

Ответы

▲ 0

Думаю весь ваш код можно заменить на CSS, а с помощью JS управлять состоянием.

У этого подхода есть минус с анимацией появления, т.к. необходимо указывать фактическое значение в пикселях, но если анимация не нужно, то можно удалить свойство transition и всё будет работать быстро.

document.querySelector('.question-answer').addEventListener("click", openAnswer);

function openAnswer(e) {
  e.currentTarget.classList.toggle('-active');
}
.question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor:pointer;
}

.question-answer .answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s;
}

.question-answer.-active .answer {
  max-height: 100px;
}
<div class="question-answer">
  <div class="question">
    <span>faq-left-question</span>
    <div class="plus-minus">
      <div class="line-horizontal"></div>
      <div class="line-vertical line-vertical-<?php echo $count; ?>"></div>
    </div>
  </div>
  <div class="answer">
    faq-left-answer
  </div>
</div>