javascript - Closing a type of dropdown when one of the same type is clicked -
i'm new jquery , javascript, , need something...
$(document).ready(function () { $('.dropdown-submenu .active-dropdown').on("click", function (e) { $(this).next('ul').toggle(); e.stoppropagation(); e.preventdefault(); }); });body { padding-bottom: 40px; color: #5a5a5a; } .navbar-wrapper { position: fixed; top: 0; right: 0; left: 0; z-index: 20; } .navbar-wrapper > .container { padding-right: 0; padding-left: 0; } .navbar-wrapper .navbar { padding-right: 15px; padding-left: 15px; } .navbar-wrapper .navbar .container { width: auto; } .carousel { height: 500px; margin-bottom: 60px; } .carousel-caption { z-index: 10; } .carousel .item { height: 500px; background-color: #777; } .carousel-inner > .item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 500px; } .marketing .col-lg-4 { margin-bottom: 20px; text-align: center; } .marketing h2 { font-weight: normal; } .marketing .col-lg-4 p { margin-right: 10px; margin-left: 10px; } .featurette-divider { margin: 80px 0; } .featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -1px; } @media (min-width: 768px) { /* navbar positioning foo */ .navbar-wrapper .container { padding-right: 15px; padding-left: 15px; } .navbar-wrapper .navbar { padding-right: 0; padding-left: 0; } .carousel-caption p { margin-bottom: 20px; font-size: 21px; line-height: 1.4; } .featurette-heading { font-size: 50px; } } @media (min-width: 992px) { .featurette-heading { margin-top: 120px; } } .arrow-up { margin: 4px; float: right; } #active { color: #fff; background-color: #080808; } .clickcursor { cursor: pointer !important; } a.btn.btn-lg.btn-warning.errorright { margin-left: 300px; width: 255px; } a.btn.btn-lg.btn-warning.errorleft { margin-right: 300px; margin-top: -117px; } .carousel-indicators .active { width: 25px; height: 25px; margin-bottom: -10px; border-radius: 15px; margin-left: 5px; margin-right: 5px; } .carousel-indicators li { width: 25px; height: 25px; margin-bottom: -10px; border-radius: 15px; margin-left: 5px; margin-right: 5px; } .carousel-caption { text-align: left; } p.left{ text-align: left; margin-left: 10px; } p.right{ text-align: right; } h2.featurette-heading.trends{ margin-top: -40px; } a.scroll.no-decoration:hover, a.scroll.no-decoration:active, a.scroll.no-decoration:focus { text-decoration: none; color: #337ab7; } .all-width { width: 100%; } .dropdown-toggle { font-size: 20px; } .dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } .nav>li>a { display: inline-block; }<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>pixel pro | tudo sobre jogos</title> <!-- bs --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- fa --> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <!-- custom style , js template --> <link href="css/styles.css" rel="stylesheet"> <!-- scripts --> <!-- smooth scroll --> <script> $(document).ready(function () { // add smooth scrolling links $("a.scroll").on('click', function (event) { // make sure this.hash has value before overriding default behavior if (this.hash !== "") { // prevent default anchor click behavior event.preventdefault(); // store hash var hash = this.hash; // using jquery's animate() method add smooth page scroll // optional number (800) specifies number of milliseconds takes scroll specified area $('html, body').animate({ scrolltop: $(hash).offset().top }, 800, function () { }); } // end if }); }); </script> </head> <body> <header> <a id="pagetop"></a> <div class="navbar-wrapper"> <nav class="navbar navbar-inverse navbar-static-top"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" id="active" href="/">pixel pro</a></li> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <!-- dropdown without subdropdowns <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">sobre [test] <span class="caret"></span></a> <ul class="dropdown-menu"> <li class="dropdown-header">indie <i class="fa fa-globe" aria-hidden="true"></i></li> <li><a href="#">minecraft</a></li> <li><a href="#">terraria</a></li> <li role="separator" class="divider"></li> <li class="dropdown-header">fps <i class="fa fa-shield" aria-hidden="true"></i></li> <li><a href="#">counter-strike: global offensive</a></li> </ul> --> <li class="dropdown"> <a class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">sobre <span class="caret"></span></a> <ul class="dropdown-menu"> <li class="dropdown-header">indie <i class="fa fa-globe" aria-hidden="true"></i></li> <li class="dropdown-submenu"> <a class="clickcursor active-dropdown">minecraft <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">topic 1</a></li> <li><a href="#">topic 2</a></li> </ul> </li> <li class="dropdown-submenu"> <a class="clickcursor active-dropdown">terraria <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">topic 3</a></li> <li><a href="#">topic 4</a></li> </ul> </li> <li role="separator" class="divider"></li> <li class="dropdown-header">fps <i class="fa fa-shield" aria-hidden="true"></i></li> <li class="dropdown-submenu"> <a class="clickcursor active-dropdown">counter strike: global offensive <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">topic 5</a></li> <li><a href="#">topic 6</a></li> </ul> </li> </li> </ul> <!-- third dropdown (which isn't necessary in dropdown) <li class="dropdown-submenu"> <a class="clickcursor active-dropdown">another dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">3rd level dropdown</a></li> <li><a href="#">3rd level dropdown</a></li> </ul> </li> --> </ul> </li> </ul> </li> </li> </ul> </div> </div> </div> </header> <main> <div id="gamescarousel" class="carousel slide" data-ride="carousel"> <!-- stop automatic carousel, remove data-ride="carousel" --> <!-- indicators --> <ol class="carousel-indicators"> <li data-target="#gamescarousel" data-slide-to="0" class="active"></li> <li data-target="#gamescarousel" data-slide-to="1"></li> <li data-target="#gamescarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img class="first-slide" src="data:image/gif;base64,r0lgodlhaqabaiaaahd3dwaaach5baaaaaaalaaaaaabaaeaaaicraeaow==" alt="first slide"> <div class="container"> <div class="carousel-caption"> <h1>minecraft</h1> <p>minecraft é um jogo de construção de sandbox criado pela mojang ab, fundada por markus persson (notch). jogabilidade envolve jogadores que interagem com o mundo jogo colocando e quebrando vários tipos de blocos em um ambiente tridimensional. </p> <p><a class="btn btn-lg btn-warning all-width" href="/subjects/minecraft/index.html" role="button">saber mais</a></p> </div> </div> </div> <div class="item"> <img class="second-slide" src="data:image/gif;base64,r0lgodlhaqabaiaaahd3dwaaach5baaaaaaalaaaaaabaaeaaaicraeaow==" alt="second slide"> <div class="container"> <div class="carousel-caption"> <h1>terraria</h1> <p>começa por construir abrigos básicos, encontra e pega minérios e outros recursos. descobre e cria até 300 armas de variedades mágicas, variadas e de corpo corpo, bem como armaduras, e usa-as para combater centenas de inimigos diferentes. em breve, estarás ir frente frente com qualquer dúzia de chefes enormes.</p> <p><a class="btn btn-lg btn-warning all-width" href="/subjects/terraria/index.html" role="button">saber mais</a></p> </div> </div> </div> <div class="item"> <img class="third-slide" src="data:image/gif;base64,r0lgodlhaqabaiaaahd3dwaaach5baaaaaaalaaaaaabaaeaaaicraeaow==" alt="third slide"> <div class="container"> <div class="carousel-caption"> <h1>counter strike: global offensive</h1> <p>counter-strike: global offensive (cs:go) é um jogo de tiro em primeira pessoa online desenvolvido pela valve corporation e pela hidden path entertainment, sendo uma sequência de counter-strike: source. É o quarto título principal da franquia.</p> <p><a class="btn btn-lg btn-warning all-width" href="/subjects/csgo/index.html" role="button">saber mais</a></p> </div> </div> </div> </div> <a class="left carousel-control" href="#gamescarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">previous</span> </a> <a class="right carousel-control" href="#gamescarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">next</span> </a> </div> <div class="container marketing"> <h2 class="featurette-heading trends">melhores <span class="text-muted">tópicos</span></h2> <div class="row"> <div class="col-lg-4"> <img class="img-circle" src="img/minecraft_index.png" alt="generic placeholder image" width="140" height="140"> <h2 class="left">minecraft</h2> <p class="left">minecraft é um jogo de construção de sandbox criado pela mojang ab, fundada por markus persson (notch). jogabilidade envolve jogadores que interagem com o mundo jogo colocando e quebrando vários tipos de blocos em um ambiente tridimensional. </p> <p><a class="btn btn-default" href="/subjects/minecraft/index.html" role="button">saber mais</a></p> </div> <!-- /.col-lg-4 --> <div class="col-lg-4"> <img class="img-circle" src="img/terraria_index.jpg" alt="generic placeholder image" width="140" height="140"> <h2 class="left">terraria</h2> <p class="left">começa por construir abrigos básicos, encontra e pega minérios e outros recursos. descobre e cria até 300 armas de variedades mágicas, variadas e de corpo corpo, bem como armaduras, e usa-as para combater centenas de inimigos diferentes. em breve, estarás ir frente frente com qualquer dúzia de chefes enormes.</p> <p><a class="btn btn-default" href="/subjects/terraria/index.html" role="button">saber mais</a></p> </div> <!-- /.col-lg-4 --> <div class="col-lg-4"> <img class="img-circle" src="img/csgo_index.jpg" alt="generic placeholder image" width="140" height="140"> <h2 class="left">counter strike: global offensive</h2> <p class="left">counter-strike: global offensive (cs:go) é um jogo de tiro em primeira pessoa online desenvolvido pela valve corporation e pela hidden path entertainment, sendo uma sequência de counter-strike: source. É o quarto título principal da franquia.</p> <p><a class="btn btn-default" href="/subjects/csgo/index.html" role="button">saber mais</a></p> </div> </div> <hr class="featurette-divider"> <div class="row featurette"> <div class="col-md-7"> <h2 class="featurette-heading">porque deves escolher-<span class="text-muted">nos?</span></h2> <p class="lead">nós estamos desenvolver um website muito elegante e moderno sem nenhum anúncio e feito com muito amor com toda informação precisa e necessária, no entanto, temos apenas minecraft, terraria e cs: go por enquanto.</p> </div> <div class="col-md-5"> <img class="featurette-image img-responsive center-block" src="/img/heart.gif" alt="generic placeholder image"> </div> </div> <hr class="featurette-divider"> <div class="row featurette"> <div class="col-md-7 col-md-push-5"> <h2 class="featurette-heading">qual o <span class="text-muted">conteúdo</span> atual?</h2> <p class="lead">por agora, temos 3 matérias: minecraft, terraria, e cs:go.</p> </div> <div class="col-md-5 col-md-pull-7"> <img class="featurette-image img-responsive center-block img-circle" src="/img/game.gif" alt="generic placeholder image"> </div> </div> <hr class="featurette-divider"> <div class="row featurette"> <div class="col-md-7"> <h2 class="featurette-heading">quem é o <span class="text-muted">dono</span> deste website?</h2> <p class="lead">o dono deste website chama-se pedro, e é sexo masculino. este curte jogar jogos e também percebe um bocadinho de programação, então, decidiu criar este website para ajudar todos os gamers e jogadores.</p> </div> <div class="col-md-5"> <img class="featurette-image img-responsive center-block img-circle" src="img/explodingpedro.jpg" alt="generic placeholder image"> </div> </div> <footer> <hr class="featurette-divider"> <a href="#pagetop" class="scroll no-decoration"><i class="fa fa-arrow-circle-up arrow-up" aria-hidden="true"></i><p class="pull-right">voltar para o topo</a></p> <p>© 2017 pedro ferreira ·</p> </footer> </main> </div> </body> </html>basically want to, when clicks dropdown submenu topic, keep how is, but, when clicks in dropdown submenu, others dropdown submenu should disappear. if got answer tell me, please, need help.
-- edit --
i need in thing, thing problem scripting , has see dropdown sub-menu, i'll edit here.
i want to, when clicks of shows sub dropdown (a.active-dropdown), if sub dropdown visible, become invisible.
i've simplified code contains layout of , not extraneous page content. in javascript section, you'll see added following line of code:
$(this).closest('nav').find('.dropdown-submenu > ul').hide(); this finds dropdown submenus , hides them before opening 1 clicked on.
i added first line of click event handler, since needs hide open ones before opening new one, otherwise open menu hide immediately.
$(document).ready(function(){ $('.dropdown-submenu .active-dropdown').click(function(e){ $(this).closest('nav').find('.dropdown-submenu > ul').hide(); $(this).next('ul').toggle(); e.stoppropagation(); e.preventdefault(); }); });.navbar-wrapper { position: fixed; top: 0; right: 0; left: 0; z-index: 20; } .navbar-wrapper > .container { padding-right: 0; padding-left: 0; } .navbar-wrapper .navbar { padding-right: 15px; padding-left: 15px; } .navbar-wrapper .navbar .container { width: auto; } @media (min-width: 768px) { .navbar-wrapper .container { padding-right: 15px; padding-left: 15px; } .navbar-wrapper .navbar { padding-right: 0; padding-left: 0; } } .dropdown-toggle { font-size: 20px; } .dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } .nav > li > { display: inline-block; }<!doctype html> <html lang="en"> <head> <!-- bs --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- fa --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header> <div class="navbar-wrapper"> <nav class="navbar navbar-inverse navbar-static-top"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <i class="fa fa-bars" style="color:#fff;"></i> </button> <a class="navbar-brand" id="active" href="#">pixel pro</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> <a class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">sobre <span class="caret"></span></a> <ul class="dropdown-menu"> <li class="dropdown-header">indie <i class="fa fa-globe" aria-hidden="true"></i></li> <li class="dropdown-submenu"> <a class="clickcursor active-dropdown">minecraft <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">topic 1</a></li> <li><a href="#">topic 2</a></li> </ul> </li> <li class="dropdown-submenu"> <a class="clickcursor active-dropdown">terraria <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">topic 3</a></li> <li><a href="#">topic 4</a></li> </ul> </li> <li role="separator" class="divider"></li> <li class="dropdown-header">fps <i class="fa fa-shield" aria-hidden="true"></i> </li> <li class="dropdown-submenu"> <a class="clickcursor active-dropdown">counter strike: global offensive <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">topic 5</a></li> <li><a href="#">topic 6</a></li> </ul> </li> </ul> </li> </ul> </div> </nav> </div> </header> </body> </html>
Comments
Post a Comment