There is such a code, on the desktop the menu opens when you hover the mouse (css: hover), on the mobile device I do it so that it opens when clicked.

The problem is reproduced with the open Chrome "Device toolbar" - development mode for mobile.

Actually the problem: the first click does not open the menu, then everything works well (that is, you need to click 2 times to open the drop-down menu). Although at the time of loading the DOM dropdown ul is hidden, it does not open, as if the Ρ…ΠΎΠ²Π΅Ρ€ effect Ρ…ΠΎΠ²Π΅Ρ€ - the menu is shown - and immediately jqury intercepts what it sees and makes it invisible. How to remove the first double click?

If you remove this piece of code, then everything works fine, but then on the desktop the hover does not plow.

 ul li.menuparent:hover > ul { visibility: visible; }

The code itself:

 $(function() { console.log('Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π”ΠžΠœ: ' + $('#f ul').css('visibility')); $('li.menuparent > a').on('click', function(e) { e.preventDefault(); console.log('Клик: ' + $('#f ul').css('visibility')); if ($('#f ul').css('visibility') == 'hidden') { $('#f ul').css('visibility', 'visible'); console.log('ΠžΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ°: скрыт, Π΄Π΅Π»Π°Π΅ΠΌ Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ'); } else { $('#f ul').css('visibility', 'hidden'); console.log('ΠžΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ°: Π²ΠΈΠ΄ΠΈΠΌ, Π΄Π΅Π»Π°Π΅ΠΌ скрытым'); } console.log('ΠšΠΎΠ½Π΅Ρ† ΠΊΠ»ΠΈΠΊΠ°: ' + $('#f ul').css('visibility')); }); }); 
 li { list-style-image: none; list-style-type: none; } ul#f > li { background-color: #ddd; float: left; padding: 10px; position: relative; border-right: 1px solid #999; } ul ul { position: absolute; visibility: hidden; } ul li.menuparent:hover > ul { background: #c2c2c4 none repeat scroll 0 0; left: 0; padding: 0 0 0 14px; top: 40px; width: 120px; visibility: visible; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ul id="f"> <li><a href="">ΠŸΡƒΠ½ΠΊΡ‚ 1</a> </li> <li class="menuparent"> <a href="">ΠŸΡƒΠ½ΠΊΡ‚ 2</a> <ul> <li><a href="">ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 1</a> </li> <li><a href="">ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 2</a> </li> <li><a href="">ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 3</a> </li> </ul> </li> <li><a href="">ΠŸΡƒΠ½ΠΊΡ‚ 3</a> </li> </ul>

  • try to change the condition - do the opposite, by contradiction: if it is shown, then hide, if not, then show - lexxl
  • @lexxl is all the same. - Jean-Claude
  • I think it's better to use toggleClass () - Blacknife

1 answer 1

The reluctance to redo the visibility of a submenu with visibility in display: none/block finished engine module. In general, I was upset and decided to just add a mouseover :

 $('li.menuparent > a').on('click mouseover', function(e) {}

or immediately after loading the house by assigning the hidden menu, and this option is the most suitable, since in the first version both events occur simultaneously and overlap each other.

 var submenu = ... submenu.css('visibility', 'hidden');