Dropdown has no effect on Safari

Question

I am building my website, using Bootstrap and Javascript (with jQuery ).
There is a navigation menu bar with a dropdown menu supposed to slide down when you hover on devices with a mouse and otherwise upon click/touch on touchscreen enabled devices.
But it isn't working as I wanted in Safari, generally iPad's. It's however working on other browsers (for PCs).

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

I tried both onclick="void(0)" and touchend event though I didn't knew it earlier :

$('.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;
    }
}

I went through a lot of googling but could not solve my issue.

Since you are using bootstrap, why did you write your own javascript? It should work right out of the box. — scooterlord, Feb 23 '18 at 10:02
Thanks , it didnt work for ios so i wrote it . This is tap event which is for ios but it doesnot work — Pravin Poudel, Feb 23 '18 at 10:53
Should have worked on iOS as well. Taking a wild guess, there might be something overlapping the dropdown element and it might 'seemingly' not work. iOS - and all other mobile browsers - respond well with `click` alone. — scooterlord, Feb 23 '18 at 12:05
Its working for android . What does overlapping the dropdown element mean ?? — Pravin Poudel, Feb 24 '18 at 10:10
Due to positioning and z-index, absolute, relative or fixed positioned elements might overlap others. If you are able to post a jsfiddle with usable code we would be able to help you out more, although I am certain that if you just place just a Dropdown in the fiddle it will work as it should. — scooterlord, Feb 25 '18 at 10:18

Василис Шлимберг · Answer 1 · 2018-02-23T15:00:49.067

-1

Try adding this

cursor:pointer

to your <a> tag in your CSS.

Refers to that problem - Post on StackOverflow

Be sure to add this line in your javascript:

$('.dropdown-toggle').dropdown()

edited Feb 23 '18 at 15:00

answered Feb 23 '18 at 14:55

Василис Шлимберг

1
1

Sorry but does iPad's even have a cursor? (I haven't used one on a few years, but I really don't remember a cursor.) – Luicy Feb 23 '18 at 15:09

Dropdown has no effect on Safari

1 Answers1