javascript - Expand one sub menu others should automatically hide in jquery -
i trying make expandable accordion menu css , jquery, want make vertical accordion menu , hide sub-menus when click on other main links, can 1 please me this.
$(function() { $('.submenu-class li').has('.mainmenu-submenu, .mainmenu-submenu-sub, .mainmenu-submenu-sub-sub').prepend('<em class="mainmenu-click"><i class="arrowupdown"></i></em>'); $('.submenu-class li').has('.megamenu').prepend('<em class="mainmenu-click"><i class="arrowupdown"></i></em>'); $('.mainmenu-mobile').click(function(){ $('.submenu-class').slidetoggle('slow'); }); $('.mainmenu-click').click(function(){ $(this).siblings('.mainmenu-submenu').slidetoggle('slow'); $(this).children('.mainmenu-arrow').toggleclass('mainmenu-rotate'); $(this).siblings('.mainmenu-submenu-sub').slidetoggle('slow'); $(this).siblings('.mainmenu-submenu-sub-sub').slidetoggle('slow'); $(this).siblings('.megamenu').slidetoggle('slow'); }); }); .clearfix:before, .clearfix:after{content: ""; display: table;}.clearfix:after{clear: both;}.clearfix{zoom: 1;}.cl{clear: both;} ul, ol{margin-top:0px; margin-right:0px; margin-left:0px; margin-bottom:0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:0px ; list-style:none;} .submenu-class li a{ display:block; background-color:#fff; color:#424242; padding:0px 14px; line-height:48px; border-right:1px solid rgba(0,0,0,0.10); text-decoration:none;} .mainmenu-click { position:absolute; top:0; right:0; display:block; cursor:pointer; width:100%; } .mainmenu-click i{ float:right; display:block; height:23px; width:25px; margin-top:11px; margin-right:8px; background-size:25px; font-size:21px; color:rgba(0,0,0,0.25); } .mainmenu-submenu-sub{ width:100% ; position:static ; left:100% ; top:0 ; display:none; margin:0px ; padding:0px ; border:solid 0px ; transform:none ; opacity:1 ; visibility:visible ; } .mainmenu-submenu-sub li{ margin:0px 0px 0px 0px ; padding:0px; position:relative;} .mainmenu-submenu-sub a{ display:block; padding:10px 25px 10px 25px; border-bottom:solid 1px #ccc; font-weight:normal;} .mainmenu-submenu-sub-sub{ width:100% ; position:static ; left:100% ; top:0 ; display:none; margin:0px ; padding:0px ; border:solid 0px ; transform:none ; opacity:1 ; visibility:visible ; } .mainmenu-submenu-sub-sub li{ margin:0px 0px 0px 0px ;} .mainmenu-submenu-sub-sub a{ display:block; color:#000; padding:10px 25px; background:#000 ; border-bottom:solid 1px #ccc; font-weight:normal;} .mainmenu{position: relative;} .arrowupdown{ width:9px; height:9px; background-color:#ccc; } .mainmenu .submenu-class li{ width:240px; display:block; float:none; border-right:none; background-color:transparent; position:relative; white-space:inherit;} .mainmenu .submenu-class li a{ padding:9px 32px 9px 17px; font-size:14px; text-align:left; border-right:solid 0px; background-color:transparent; color:#666666; line-height:25px; border-bottom:1px solid; border-bottom-color:rgba(0,0,0,0.13);} .submenu-class .mainmenu-submenu{ transform:none ; opacity:1 ; display:none; position:relative ; top:0px; background-color:#fff ; border:solid 1px #ccc; padding:0px; visibility:visible ; } .submenu-class .mainmenu-submenu li a{ line-height:20px; height:36x; background-color:#fff ; font-size:13px ; padding:8px 0px 8px 18px; color:#8e8e8e;} .submenu-class .megamenu{ background-color:#e7e7e7; color:#666666; display:none; position:relative ; top:0px; padding:0px; border:solid 0px; transform:none ; opacity:1 ; visibility:visible ; } .submenu-class li:hover .megamenu{display:none; position:relative ; top:0px; } .megamenu .title{ color:#666666; font-size:15px ; padding:10px 8px 10px 0px;} .halfdiv .title{ padding-left:15px;} .megamenu > ul{ width:100% ; margin:0px; padding:0px; font-size:13px ;} .megamenu ul li a{ padding:9px 14px ; line-height:normal ; font-size:13px ; background-color:#e7e7e7 ; color:#666666;} .mainmenu { width:100%; height: 100%; position: fixed; left: 0; top: 0; margin: 0; background-color: #fff; border-radius:0px; z-index:100; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; -ms-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; border:none ;} <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="mainmenu clearfix"> <ul class="submenu-class"> <li><a href="#"><span class="hometext">open menu 01</span></a></li> <li><a href="#">dropdowns </a> <ul class="mainmenu-submenu"> <li><a href="#">dummy sub menu style 01</a></li> <li><a href="#">dummy sub menu style 01</a></li> <li><a href="#">dummy sub menu style 01</a></li> <li><a href="#">dummy sub menu style 01</a></li> <li><a href="#">dummy sub menu style 01</a> <ul class="mainmenu-submenu-sub"> <li><a href="#">dummy sub menu style 02</a></li> <li><a href="#">dummy sub menu style 02</a></li> <li><a href="#">dummy sub menu style 02</a></li> <li><a href="#">dummy sub menu style 02</a> <ul class="mainmenu-submenu-sub-sub"> <li class=""><a href="#">dummy sub menu style 03</a></li> <li class=""><a href="#">dummy sub menu style 03</a></li> <li class=""><a href="#">dummy sub menu style 03</a></li> <li class=""><a href="#">dummy sub menu style 03</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">open page text menu 01 </a> <div class="megamenu clearfix"> <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.</p> </div> </li> <li><a href="#">open page text menu 01 </a> <div class="megamenu clearfix" > lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum. </div> </li> </ul> </div>
here updated fiddle
modified click function below:
$('.mainmenu-click').click(function(){ $('.mainmenu-submenu').hide(); $(this).siblings('.mainmenu-submenu').show(); $(this).children('.mainmenu-submenu').slidetoggle('slow'); $(this).children('.mainmenu-arrow').toggleclass('mainmenu-rotate'); $(this).siblings('.mainmenu-submenu-sub').slidetoggle('slow'); $(this).siblings('.mainmenu-submenu-sub-sub').slidetoggle('slow'); $('.megamenu').hide(); $(this).siblings('.megamenu').slidetoggle('slow'); }); you first need close expanded accordion , display active one. hope helps.
Comments
Post a Comment