javascript - 单击一个 Div 下拉功能在 iPhone 上不起作用

Question

编辑:原来问题不一定是我的代码造成的。当我单击导航栏中的链接时，它会在除 Chrome 之外的所有浏览器上转到 mobile/folder/page.html。当我单击 chrome 中的链接时，它会出于某种原因打开/mobile/#/mobile/folder/page.html，这就是它不起作用的原因。如果我直接转到页面，它工作正常。有谁知道如何解决这个问题？

此代码适用于我的每个浏览器，适用于 Android 手机，但不适用于 iphone。我试过添加点击和触摸而不是 onClick，切换而不是隐藏和显示，将 onclick 添加到 css，并将 cursor:pointer 添加到 css，但我找不到解决方案。也许我把它们加错了，但我不确定。请帮忙!

https://jsfiddle.net/anthonyparrett7/0bmw79yw/

$(document).ready( function() {
/* Question and Answer Dropdowns */     
$(".dropdown-link").click(function(e) {         
  e.preventDefault();
  var $div = $(this).next('.dropdown-container');
  $(".dropdown-container").not($div).hide();
    if ($div.is(":visible")) {
        $div.hide()
    }  else {
       $div.show();
    }
});
$(document).click(function(e){
    var p = $(e.target).closest('.dropdown').length
    if (!p) {
          $(".dropdown-container").hide();
    }
});
});  

Answer 1

您没有在页面加载时正确调用函数。

尝试使用 $(document).ready(function() 而不是 $(document).on("pageinit", "#page-container", function()

看这个片段:

$(document).ready(function() {
  $(".dropdown-link").click(function(e) {
    var $div = $(this).next('.dropdown-container');
    $(".dropdown-container").not($div).hide();
    if ($div.is(":visible")) {
      $div.hide()
    } else {
      $div.show();
    }
  });
  $(document).click(function(e) {
    var p = $(e.target).closest('.dropdown').length
    if (!p) {
      $(".dropdown-container").hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
  <div class="dropdown-link">
    <h4>What is a Question?</h4>
  </div>
  <div class="dropdown-container" style="display: none;">
    <p>Bla bla bla blablablabla words Ipsum</p>
  </div>
</div>

<div id="dropdown-2" class="dropdown dropdown-processed">
  <div class="dropdown-link">
    <h4>What is a Question 2?</h4>
  </div>
  <div class="dropdown-container" style="display: none;">
    <p>Bla bla bla blablablabla words Ipsum</p>
  </div>
</div>