Question

我正在努力使工作成为我网站上存在的功能，但在Safari for 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 for iPhone上它完成了我所描述的内容：立即显示和隐藏隐藏元素。

有没有使用外部javascript框架（但是jQuery）的解决方案？

Answer 1

我刚刚编写了一个演示程序（见下文），它在桌面Firefox，iPhone模拟器中的Safari和iPad Safari上运行良好。也许您希望确保多个事件侦听器不会捕获click事件。

<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>

切换jQuery功能无法在Safari Mobile上运行

1 个答案: