切换 jQuery 函数在 Safari Mobile 上不起作用

发布于 2024-09-26 07:07:26 字数 946 浏览 1 评论 0原文

我正在尝试使工作成为我网站上存在的一项功能，但在 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）的解决方案？

原文

I'm trying to make work a functionality that exists on my website but works bad on Safari for iPhone.

Well, I have a "li" element:

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

When I click on the 'show or hide' button, the text input should appear or disappear.

Then, I have a jQuery function that binds the click:

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

The problem is that, if the element appears, Safari hides it then shows it.

So I think that Safari checks wether the element is visible or not. If it's visible, it hides it, then go to the "else" selection. There, it checks if the element is visible or not. It will find the it's not visible, then will make it appear.

So someone on StackOverflow advises me to use the toggle function and that is what I did:

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

I tried your function: It works perfectly on desktop browsers (chrome, safari) but on Safari for iPhone it did what I described: Shows and hides the hidden element instantly.

Is there a solution for that without using an external javascript framework (but jQuery)?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

提赋 2024-10-03 07:07:26

我刚刚编写了一个演示程序（见下文），它在桌面版 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>

I just wrote a demo program (see below) and it ran fine on desktop Firefox, Safari in iPhone Simulator, and iPad Safari. Perhaps you want to make sure that the click event is not captured by multiple event listeners.

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

回复收藏 0 原文

~没有更多了~