Показать/скрыть переключатель функций для iPad

1 Paul [2013-09-22 11:14:00]

У меня есть функция переключения на моем сайте (пример здесь), где вы можете показывать и скрывать текст в DIV. Код:

.js код

function toggle(sDivId) {
                var oDiv = document.getElementById(sDivId);
                oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none";
}

.html код:

<div onclick="toggle('divContent1')" style="cursor: pointer;">Hide and show</div>
    <div id="divContent1" style='display:none'>
    text here
    </div>
</div>

Эта функция отлично работает на веб-сайте, когда я просматриваю ее на своем компьютере. Но когда я проверил свой сайт на iPad, он не работает. Кто-нибудь знает, почему и вы могли бы предложить решение этой проблемы? Благодарю!

javascript jquery ios ipad toggle

Оригинал вопроса (на английском)

1 ответ

2 Решение Gone Coding [2013-09-22 11:41:00]

Пример jQuery:

Html

<div>
    <div id="pressMe" style="cursor: pointer;">Hide and show</div>
    <div id="divContent1" style='display:none'>text here</div>
</div>

JQuery

$('#pressMe').click(function(){
    $('#divContent1').toggle();
});

JSFiddle здесь: http://jsfiddle.net/cuDp5/

Играйте с ним на JSFiddle. Вы все равно можете вызывать функции из обработчика привязки определенного div, если хотите, это просто показывает альтернативу. Обычно лучше управлять выбором кнопки и цели с помощью классов (для идентификации кнопок) и атрибутов, таких как data-targetdiv="#divContent1" чтобы код был повторно использован и не был жестко связан с определенным идентификатором в коде.

Пример более гибкой версии, управляемой данными: http://jsfiddle.net/cuDp5/2/

Обратите внимание, что вам нужно обернуть JQuery в событие "onloaded". В JQuery, который раньше был $(document).ready( но современная стенография теперь просто $(function(){...});

например

$(function(){
   $('.pressMe').click(function(){
      $($(this).attr('data-target')).toggle();
   });
});

Этот код извлекает атрибут данных из выбранного элемента, который будет использоваться в качестве селектора, для которого элемент переключается. Гораздо лучше, чем идентификатор жесткой проводки в коде. В примере есть два набора div для демонстрации.

Оригинал ответа (на английском)