Javascript 下拉列表对Safari没有影响

我正在通过jQuery使用引导和Javascript构建我的应用程序。 有一个带有下拉菜单的导航菜单栏，当您用鼠标悬停在设备上时，或者在启用触摸屏的设备上单击/触摸时，该菜单应向下滑动。 但它并没有像我在Safari（通常是iPad）中希望的那样工作。不过，它正在其他PC浏览器上运行

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    360 Image <b class="caret"></b>
  </a>
  <ul class="dropdown-menu mega-menu">
    <li>
     <div class="row-fluid">
        <ul class="media-list span4">
          <li class="media">
            <a href="#" class="pull-left">
              <img src="https://image.shutterstock.com/z/stock-vector--d-vector-asia-continent-illustrati

on-131672768.jpg" alt="" class="media-object">
            </a>
            <div class="media-body">
              <h5 class="media-heading">ASIA</h5>
              <ul class="unstyled">
                <li>
                  <a onclick="return true;" class="category_text"  href="{{url("360image/Mount_Everest")}}">
                    Mount Everest
                  </a>
                </li>

            <li>
              <a onclick="return true;" class="category_text"  href="{{url("360image/K2")}}">
                K2 - Pakistan
              </a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <ul class="media-list span4">
      <li class="media">
        <a href="#" class="pull-left">
          <img src="http://www.the-dialogue.com/wp-content/uploads/2016/03/en20-oceania-flags-in-the-symbolism-of-the-island-nations_10.jpg" alt="" class="media-object">
        </a>
        <div class="media-body">
          <h5 class="media-heading">AUSTRALIA AND OCEANIA</h5>
          <ul class="unstyled">
            <li>
              <a onclick="return true;" class="category_text"  href="{{url("360image/Carstensz_pyramid")}}">
                Carstensz Pyramid
              </a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <ul class="media-list span4">
      <li class="media">
        <a href="#" class="pull-left">
          <img src="http://www.classroomclicks.com/diecuts/images/Places/Antarctica_12885.gif" alt="" class="media-object">
        </a>
        <div class="media-body">
          <h5 class="media-heading">ANTARTICA</h5>
          <ul class="unstyled">
            <li>
              <a onclick="return true;" class="category_text"  href="{{url("360image/Vinson_massif")}}">
                Vinson Massif
              </a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
  <hr>
  <div class="row-fluid">
    <ul class="media-list span4">
      <li class="media">
        <a href="#" class="pull-left">
          <img src="https://ak0.picdn.net/shutterstock/videos/8652190/thumb/2.jpg" alt="" class="media-object">
        </a>
        <div class="media-body">
          <h5 class="media-heading">EUROPE</h5>
          <ul class="unstyled">
            <li>
              <a onclick="return true;" class="category_text"  href="{{url("360image/mount_blanc")}}">
                Mount Blanc
              </a>
            </li>    

           <!--
           <li>
              <a onclick="return true;" class="category_text"  href="{{url("360image/mount_elbrus")}}">
                Mount Elbrus
              </a>
            </li>
            -->

          </ul>
        </div>
      </li>
    </ul>
    <ul class="media-list span4">
      <li class="media">
        <a href="#" class="pull-left">
          <img src="http://ak8.picdn.net/shutterstock/videos/8652208/thumb/4.jpg" alt="" class="media-object">
        </a>
        <div class="media-body">
          <h5 class="media-heading">AFRICA</h5>
          <ul class="unstyled">
            <li>
              <a onclick="return true;" class="category_text"  href="{{url("360image/kilimanjaro")}}">
                Kilimanjaro
              </a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <ul class="media-list span4">
      <li class="media">
        <a href="#" class="pull-left">
          <img src="http://ak0.picdn.net/shutterstock/videos/8652130/thumb/2.jpg" alt="" class="media-object">
        </a>
        <div class="media-body">
          <h5 class="media-heading">SOUTH AMERICA</h5>
          <ul class="unstyled">
            <li>
              <a onclick="return true;" class="category_text"  href="{{url("360image/Aconcagua")}}">
                Aconcagua
              </a>
            </li>
          </ul>
        </div>
      </li>
    </ul>

    <ul class="media-list span4">
      <li class="media">
        <a href="#" class="pull-left">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Flag_Map_North_America_%281864%29.png/694px-Flag_Map_North_America_%281864%29.png" alt="" class="media-object">
        </a>
        <div class="media-body">
          <h5 class="media-heading">NORTH AMERICA</h5>
          <ul class="unstyled">

            <!--
            <li>
              <a onclick="return true;" class="category_text"  href="{{url("360image/Mexico_volcanoes")}}">
                Mexico Volcanoes
              </a>
            </li>
            -->

            <li>
              <a onclick="return true;" class="category_text"  href="{{url("360image/eldorado_peak")}}">
                Eldorado Peak
              </a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
        </div>
      </li>
    </ul>
  </li>

我在谷歌上搜索了很多次，但都没能解决我的问题

尝试添加这个 光标：指针

给你

请确保在javascript中添加以下行： $'.dropdown切换'.dropdown

---

既然您使用的是引导，为什么要编写自己的javascript？它应该可以开箱即用。谢谢，它不适用于ios，所以我写了它。这是针对ios的tap事件，但它不起作用。本应在ios上也起作用。随便猜一猜，可能有一些内容与下拉元素重叠，而且可能“看起来”不起作用。iOS和所有其他移动浏览器都只需点击就能很好地响应。它适用于android。重叠下拉元素意味着什么？由于定位和z索引，绝对、相对或固定定位元素可能与其他元素重叠。如果你能够发布一个带有可用代码的JSFIDLE，我们将能够为你提供更多帮助，尽管我确信，如果你只在FIDLE中放置一个下拉菜单，它将正常工作。对不起，iPad甚至有光标吗？我已经好几年没用过了，但我真的不记得光标了。

$('.dropdown-toggle').on("click tap", function(e) {
    // $(this).next('div').slideToggle('normal');

    if ($(this).parent().hasClass('open')) {
      $(".dropdown").removeClass("open");

      console.log('opened');
      return true;
    }

    if (!$(this).parent().hasClass('open')) {
      $(this).next('div').slideToggle('normal');
      // $(".dropdown").addClass("open");
      console.log('not open ');
      return true;
    }
}