I wrote a menu on jquery but the problem is that the menu items do not close when opening another one by clicking, how to implement it? I attach code and markup
$(document).ready(function(){ $( "#m1" ).click(function() { $( "#m1" ).css( "background", "#88B3FF" ); }); }); $(document).ready(function(){ $( "#hide" ).click(function() { $( "#m1" ).css( "background", "#fff" ) }); }); $(document).ready(function(){ $( "#m2" ).click(function() { $( "#m2" ).css( "background", "#88B3FF" ); }); }); $(document).ready(function(){ $( "#hide" ).click(function() { $( "#m2" ).css( "background", "#fff" ) }); }); $(document).ready(function(){ $( "#m3" ).click(function() { $( "#m3" ).css( "background", "#88B3FF" ); }); }); $(document).ready(function(){ $( "#hide" ).click(function() { $( "#m3" ).css( "background", "#fff" ) }); }); $(document).ready(function(){ $( "#m4" ).click(function() { $( "#m4" ).css( "background", "#88B3FF" ); }); }); $(document).ready(function(){ $( "#hide" ).click(function() { $( "#m4" ).css( "background", "#fff" ) }); }); $(document).ready(function(){ $( "#m5" ).click(function() { $( "#m5" ).css( "background", "#88B3FF" ); }); }); $(document).ready(function(){ $( "#hide" ).click(function() { $( "#m5" ).css( "background", "#fff" ) }); }); *{ margin:0; padding:0; } html,body{ overflow-x:hidden; } menu,nav{ display:block; } menu,#hide{ width:100vw; height:100vh; background:#fff; position:absolute; top:0; left:0; z-index:-1; } nav{ width:100vw; height:50px; background:#fff; position:relative; top:30vh; border-bottom:3px solid #88B3FF; } nav:after{ content:''; display:block; clear:both; } nav li{ float:left; display:block; width:120px; height:50px; line-height:50px; text-align:center; list-style:none; text-transform:uppercase; margin:0 1px; position:relative; left:30px; } nav li:hover{ background:; } nav a{ text-decoration:none; color:#555; cursor:pointer; } nav ul li div{ width:99vw; position:absolute; left:-30px; top:53px; display:none; background:#88B3FF; } nav ul li div:after{ content:''; display:block; clear:both; } nav a:hover{ color:blue; } nav li div ul{ float:right; width:300px; background:; margin:0 3px 3px 0; position:relative; left:-5%;top:3px; } nav li div ul li{ width:300px; text-align:center; margin-left:-20px; } nav li div ul li a{ color:#fafafa; } nav li div ul h3{ text-align:center; margin-left:17px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <menu> <div id="hide"></div> <nav> <ul> <li id="m1"><a>Блоги</a> <div class="m1"> <ul> <h3>css</h3> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> </ul> <ul> <h3>html</h3> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> </ul> <ul> <h3>js</h3> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> </ul> <ul> <h3>ajax</h3> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> </ul> <ul> <h3>php</h3> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> </ul> </div> </li> <li id="m2"><a>Кино</a></li> <li id="m3"><a>Форум</a></li> <li id="m4"><a>Уроки</a></li> <li id="m5"><a>О нас</a></li> </ul> </nav> </menu> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#hide").click(function(){ $(".m1").hide(); }); $("#m1").click(function(){ $(".m1").show(); }); }); </script> </body> </html> The problem is that all the tabs can be opened at once, but they should be closed when you click on the next item.
$('#hide'). While you solve this problem, solve all the others. By the way, pay attention also that this element hasz-index: -1;- cyadvert