javascript - Hover action on Acordeon menu -
i'm searching solution how open , close accordeon hoovering on parent links? know add hover-method closes accordeon when remove cursor. should close menu when i'm hovering other item.
would great if give me hint!
$(document).ready(function () { $('#nav > li > a').click(function(){ if ($(this).attr('class') != 'active'){ $('#nav li ul').slideup(); $(this).next().slidetoggle(); $('#nav li a').removeclass('active'); $(this).addclass('active'); } }); if($(".active").parent().parent().is('#nav')){ $(".active").next().slidetoggle(); }else{ $(".active").parents('ul').siblings('a').click(); } }); #nav { float: left; width: 280px; } #nav li { display: inline-block; padding: 10px 15px; text-decoration: none; color: #000; list-style:none; } #nav li a:hover, #nav li a.active { } #nav li ul { display: none; // used hide sub-menus list-style:none; } #nav li ul li { padding: 10px 25px; } ul{ list-style:none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul id="nav"> <li><a href="#" >item 1</a> <ul> <li><a href="#" class="active">sub-item 1 a</a></li> <li><a href="#">sub-item 1 b</a></li> <li><a href="#">sub-item 1 c</a></li> </ul> </li> <li><a href="#">item 2</a> <ul> <li><a href="#">sub-item 2 a</a></li> <li><a href="#">sub-item 2 b</a></li> </ul> </li> <li><a href="#">item 3</a> <ul> <li><a href="#">sub-item 3 a</a></li> <li><a href="#">sub-item 3 b</a></li> <li><a href="#">sub-item 3 c</a></li> <li><a href="#">sub-item 3 d</a></li> </ul> </li> <li><a href="#">item 4</a> <ul> <li><a href="#">sub-item 4 a</a></li> <li><a href="#">sub-item 4 b</a></li> <li><a href="#">sub-item 4 c</a></li> </ul> </li> </ul> here same thing in jsfiddle: https://jsfiddle.net/8y60hre0/8/
$(document).ready(function () { $('#nav > li > a').click(function(){ if ($(this).attr('class') != 'active'){ $('#nav li ul').slideup(); $(this).next().slidetoggle(); $('#nav li a').removeclass('active'); $(this).addclass('active'); }else{ $('#nav li a').removeclass('active'); $(this).addclass('active'); $(this).next().slidetoggle(); } }); $('#nav > li > a').hover(function(){ if ($(this).attr('class') != 'active'){ $('#nav li ul').slideup(); $(this).next().slidetoggle(); $('#nav li a').removeclass('active'); $(this).addclass('active'); } }); if($(".active").parent().parent().is('#nav')){ $(".active").next().slidetoggle(); }else{ $(".active").parents('ul').siblings('a').click(); } });
Comments
Post a Comment