链接到移动设备的悬停下拉菜单

Question

I've found an issue I just can't seem to solve.

I've got a navigation, 5 links in total. One of the links has a dropdown menu when you hover over it showing 3 more links.

Fine when a mouse is involved. But when you start using touch devices, the parent link consumes all gestures and taps, and the viewer is shown the dropdown for a fraction of a second before being taken to the parent's link page.

I'm wondering if there's a way of making it so the first touch of the parent link shows the dropdown menu, then a second touch would go to that link. touching anything else would just hide the dropdown.

<ul id="main-menu">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a>
        <ul class="sub-menu">
           <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
        </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

Anyone have any ideas? jQuery would be ideal

Answer 1

Something like this perhaps? You may want to customize the behavior of the dropdown, but this shows the basic logic of handling the click events and preventing default behaviour (ie following links) if the menu isn't open:

$(function() {
    $('#main-menu a').click(function(e) {
        var listItem = $(this).closest('li');
        if (!listItem.is('.open')) {
            // Opening drop-down logic here. e.g. adding 'open' class to <li>
            e.preventDefault();
            listItem.addClass('open');
        }
        // Otherwise the default behaviour of the event (clicking the link) will be unaffected
    });
});

Answer 2

i have done complete bins for above issue also placed demo link here.

Demo: http://codebins.com/bin/4ldqp72

HTML

<ul id="main-menu">
  <li>
    <a href="#">
      Link
    </a>
  </li>
  <li>
    <a href="#">
      Link
    </a>
  </li>
  <li>
    <a href="#">
      Link
    </a>
    <ul class="sub-menu">
      <li>
        <a href="#">
          Sub Link
        </a>
      </li>
      <li>
        <a href="#">
          Sub Link
        </a>
      </li>
      <li>
        <a href="#">
          Sub Link
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">
      Link
    </a>
  </li>
  <li>
    <a href="#">
      Link
    </a>
  </li>
</ul>

JQuery

$(function() {
    $('ul a').click(function(e) {
        $('#main-menu li').removeClass('open');
        e.preventDefault();
        $(this).closest('li').addClass("open");
        var pos = $(this).closest('li.open').offset();
        $(this).closest('li.open').find("ul.sub-menu").css('top', pos.top + 'px');

    });
});

CSS

#main-menu{
  list-style:none;
  margin:2px;
  padding:2px;
}
li{
  border:1px solid #333;
  background:#ebcdff;
  text-align:center;
  width:100px;
}
li:hover{
  background:#abcdfd;
}
li:hover a{
  color:#ff3322;
}
li a{
  text-decoration:none;
  color:#2466ff;

}
li.open {
  background:#abcdfd;

}
li.open a{
  text-decoration:none;
  color:#ff3322;

}
ul.sub-menu{
  list-style:none;
  display:none;
}
li.open > ul{
  position:absolute;
  left:70px;
  display:block;
}

Demo: http://codebins.com/bin/4ldqp72