Hello. I want to make sure that when you click on the link, more menu items appear, and then, if you click on this link again, this menu disappears.

Here is the code:

.sub-menu { display: none; } .main-item:focus ~ .sub-menu, .main-item:active ~ .sub-menu, .sub-menu:hover { display: block; } 
 <a class="main-item" href="javascript:void(0);" tabindex="1" >ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ подмСню</a> <ul class="sub-menu"> <li><a href="#1">ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 1</a></li> <li><a href="#2">ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 2</a></li> <li><a href="#3">ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 3</a></li> </ul>

And everything would be fine - but when you click on the link, the menu is not hidden. I would be grateful for the help.

    3 answers 3

     function toggle(el) { el.style.display = (el.style.display == 'none') ? 'block' : 'none'; } 
     <a onclick="toggle(document.getElementById('sub-menu'))">ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ подмСню</a> <ul id="sub-menu" style="display:none"> <li><a href="#1">ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 1</a></li> <li><a href="#2">ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 2</a></li> <li><a href="#3">ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 3</a></li> </ul>

    • In this case, the menu does not disappear anywhere on the screen - iKey
    • Yes, because the question was "click on the link again to close the submenu." - Darevill

    You can try this without js:

     .sub-menu { display: none; } .main-item { display: inline-block; border: 1px solid #333 } #submenu:target { display: block; } 
     <a href="#submenu" class="main-item" tabindex="1" >ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ подмСню</a> <ul id='submenu' class="sub-menu"> <li><a href="#1">ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 1</a></li> <li><a href="#2">ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 2</a></li> <li><a href="#3">ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 3</a></li> </ul> 

       $(document).ready(function(){ $(".js").click(function(){ $(".js").hide(); $("ul>li>ul").hide(); }); $("ul>li:nth-child(3)").click(function(){ $(".js").show(); $("ul>li>ul").show(); }); }); 
       ul>li{ list-style:none; display:inline-block; background:rgba(0,0,0,.2); position:relative; width:100px; cursor:pointer; } ul ul{ position:absolute; top:20px; left:-40px; width:100px; z-index:10; display:none; } ul li ul li{ display:block; border-bottom:2px solid #fff; } .js{ position:fixed; top:0;left:0; width:100%; height:100%; z-index:9; display:none; background:transparent; } a{ color:blue; text-decoration:underline; } li{ text-align:center; } 
       <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <ul> <li><a href="">Бсылка 1</a></li> <li><a href="">Бсылка 2</a></li> <li><a>Бсылка 3</a> <ul> <li><a href="">Бсылка 1</a></li> <li><a href="">Бсылка 2</a></li> <li><a href="">Бсылка 3</a></li> </ul> </li> </ul> <div class="js"></div> </body> </html>

      like that on click anywhere