У меня есть опция переключения текста на моем (WordPress) сайте:
Если вы нажмете на красную ссылку «информация» справа, откроется текст под ней. Проблема в том, что он не работает на мобильных устройствах (iPhone 4). Смотрите скриншот прилагается. Мне кажется, JavaScript вообще не загружается или просто не работает?
html ссылка:
<div id="<?php the_ID(); ?>" class="projectTitel">
<?php the_title( sprintf( '<h2 class="entry-title"><button rel="bookmark" class="show">', esc_url( get_permalink() ) ), '<div class="info">Info ↓</div><div class="close_info">X</div></button></h2>' ); ?>
</div>
код JavaScript:
<script type="text/javascript">
var divs = document.getElementsByClassName("projectTitel");
[...divs].forEach(someDiv => someDiv.addEventListener("click", handler));
// by default, all Inhoud divs are hidden
hideElements("Inhoud");
hideElements("close_info");
jQuery('.info').show();
function handler(event) {
// get the clicked project's index :
var projectIndex = getClickedProjectIndex(event);
// toggle the right Inhoud div :
toggleDiv(document.getElementsByClassName("Inhoud")[projectIndex]);
toggleDiv(document.getElementsByClassName("close_info")[projectIndex]);
toggleDiv(document.getElementsByClassName("info")[projectIndex]);
}
// hide all elements that have the provided class name
function hideElements(className) {
var elements = document.getElementsByClassName(className);
[...elements].forEach(element => element.style.display = "none");
}
function getClickedProjectIndex(event) {
var elements = document.getElementsByClassName("projectTitel");
var projectIndex = 0;
[...elements].forEach((element, index) => {
if (element.id == event.currentTarget.id) {
projectIndex = index;
}
});
return projectIndex;
}
function toggleDiv(element) {
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
</script>