Переключение функции jQuery не работает в Safari Mobile

Я пытаюсь заставить работать функциональность, которая существует на моем веб-сайте, но плохо работает в Safari для iPhone.

Ну, у меня есть элемент "li":

..
    <li><input id='showOrHide' type='button' value='show or hide'/></li>
    <li><input type='text' value='ok'/></li>
..

Когда я нажимаю кнопку «показать или скрыть», ввод текста должен появиться или исчезнуть.

Затем у меня есть функция jQuery, которая связывает щелчок:

$("#showOrHide").click(function(){
  if($(this).parent().next().is(':visible'))
    $(this).parent().next().hide('slow');
 else
    $(this).parent().next().show('slow');
});

Проблема в том, что если элемент появляется, Safari скрывает его, а затем показывает.

Поэтому я думаю, что Safari проверяет, виден ли элемент или нет. Если он виден, он скрывает его, затем переходите к выбору «еще». Там он проверяет, виден элемент или нет. Он обнаружит, что его не видно, а затем заставит его появиться.

Итак, кто-то из StackOverflow посоветовал мне использовать функцию переключения, что я и сделал:

$("#showOrHide").click(function(){ 
  $(this).parent().next().toggle('slow');
});

Я попробовал вашу функцию: она отлично работает в настольных браузерах (chrome, safari), но в Safari для iPhone она делает то, что я описал: мгновенно показывает и скрывает скрытый элемент.

Есть ли решение для этого без использования внешней среды javascript (но jQuery)?


toggle jquery mobile-safari
person Zakaria    schedule 08.10.2010    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я только что написал демонстрационную программу (см. ниже), и она отлично работала в настольном Firefox, Safari в iPhone Simulator и iPad Safari. Возможно, вы хотите убедиться, что событие щелчка не перехватывается несколькими прослушивателями событий.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#showHide').click(function(e) {
        $(this).parent().next().toggle('slow');
    });
});
</script>
</head>

<body>
<ul>
  <li><input type="button" value="show hide" id="showHide" /></li> 
  <li><input type="text" value="ok" /></li>
</ul>
</body>
</html>
person William Niu    schedule 18.10.2010