切换 jQuery 功能在 Safari Mobile 上不起作用答案

【问题标题】：Toggling jQuery function not working on Safari Mobile切换 jQuery 功能在 Safari Mobile 上不起作用
【发布时间】：2010-10-08 08:28:27
【问题描述】：

我正在尝试使工作成为我网站上存在但在 iPhone 版 Safari 上运行不佳的功能。

好吧，我有一个“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）上完美运行，但在 iPhone 版 Safari 上却做了我所描述的：立即显示和隐藏隐藏元素。

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

【问题讨论】：

标签： jquery toggle mobile-safari

【解决方案1】：

我刚刚编写了一个演示程序（见下文），它在桌面 Firefox、iPhone 模拟器中的 Safari 和 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>

【讨论】：