HREF 链接在 iPad 上不起作用答案

【问题标题】：HREF links not working on iPadHREF 链接在 iPad 上不起作用
【发布时间】：2014-10-22 18:49:05
【问题描述】：

所以我有一个写成嵌套列表形式的菜单：

<ul id="nav-secondary" class="menu">
  <li><a href="javascript:;">About Us</a>
    <ul>
      <li><a href="http://our.site.com/about-us/index.php">Our History</a></li>            
      <li><a href="http://our.site.com/about-us/affiliates.php">Affiliated Stuff!</a></li>
      <li><a href="http://our.site.com/about-us/what-is-science/index.php">What is Science?</a></li>
      <li><a href="http://our.site.com/about-us/cognoscente-email-list.php">Cognoscente Email List</a></li>
      <li><a href="http://our.site.com/about-us/life-in-bloomington.php">Life In Bloomington</a></li>
      <li><a href="#">Science Links</a>                                              
        <ul>                                                                                   
          <li><a href="http://our.site.com/about-us/science-links/current-issues.php">Current Issues</a></li>
          <li><a href="http://our.site.com/about-us/science-links/experiments.php">Experiments</a></li>
          <li><a href="http://our.site.com/about-us/science-links/scientists.php">Some scientists</a></li>
          <li><a href="http://our.site.com/about-us/science-links/professional-organizations.php">Professional Organizations </a></li>
        </ul>
      </li>
      <li><a href="http://our.site.com/about-us/contact-information.php">Contact Us</a></li>      
      <li><a href="http://our.site.com/about-us/spotlights.php">Spotlights</a></li> 
      <li><a href="http://our.site.com/about-us/employment.php">Employment</a></li>        
    </ul>
  </li>
.
.
.

这会持续很长时间。我写了一些 jQuery 来给它一个很好的滑动效果。这是在文档准备功能中。

$('#nav-secondary li ul').hide();
$('#nav-secondary li a').each(function () {
  var a = $(this);
  var href = $(this).attr('href'); 
  var current_page = window.location.pathname;
  if(href.indexOf(current_page) !== -1 && current_page !== "/" && current_page!== "/index.php") {
    $(this).addClass('active');
    $(this).parents().addClass('active');
    $(this).parents().show();
    $(this).attr("href", "javascript:;");
  }

});

$('#nav-secondary li > a').on('click touchstart', function() {
  if ($(this).attr('class') != 'active'){
    $(this).next().slideToggle();
    $(this).parents().addClass('active');
  } else {
    if(href.indexOf(current_page) !== -1 && current_page !== "/") {
      $(this).slideToggle();
    } 
  }   
});

因为我们希望人们能够使用他们的 iPad 浏览我们的网站。在 iPad 上，滑动菜单有效，但 页面上的任何链接都无效，除非您将手指放在它们上方，在这种情况下，您将提供 Safari 的对话框，允许您打开它/打开它在新选项卡/窗口/等中。除滑动菜单部分外，所有链接都需要长按才能打开。

【问题讨论】：

我可以看小提琴或现场演示吗？
在 ipad 中打开这个小提琴：jsfiddle.net/gjfqzyc5/4 让我知道它是否有效？？？

标签： jquery html ios ipad

【解决方案1】：

您是否正在使用 jQuery mobile？

在 jQuery 中学习的第一件事是调用 $(document).ready() 函数中的代码，以便在加载 DOM 后立即执行所有内容。但是，在 jQuery Mobile 中，Ajax 用于在您导航时将每个页面的内容加载到 DOM 中，并且 DOM 就绪处理程序仅针对第一页执行。要在加载和创建新页面时执行代码，您可以绑定到 pageinit 事件。此事件在本页底部有详细说明。

【讨论】：

我们没有使用 jQuery mobile。

【解决方案2】：

如果您使用的是 web 视图，那么您必须了解 Web 视图包含一些委托方法，以便从该委托方法中找到单击事件，您需要像这样调用 URL

[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"www.google.com"]];

这是在单击 Web 视图中的任何链接时触发的委托方法

    -(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
if (navigationType == UIWebViewNavigationTypeLinkClicked) {
{
   [[UIApplication sharedApplication] openURL:[request URL]];
}

}

【讨论】：

这是一个由 Apache 托管的 PHP、HTML 和 jQuery 的常规网页。没什么特别的。

【解决方案3】：

所以有一个弹出 js 文件，其中包含一些关于悬停的代码。这段代码实际上没有任何问题。

这里的主要问题是 iPad 可以将点击事件注册为与 touchend 侦听器竞争的悬停。

iPad/iPhone hover problem causes the user to double click a link

【讨论】：

【解决方案4】：

不要重新创建滚轮...使用现有的 jQuery 滑块菜单

【讨论】：

我想将来我可能会使用这些，但在这一点上，重新发明的轮子不仅是滚动的，而且是附着在汽车上的。我正在更新主帖，但所有不属于滑动部分的链接，不仅仅是终端菜单节点，如果不按住它们似乎就无法打开。