打开第一个声音的菜单手风琴

Question

i have this menu I can not copy the code of the menu on the topic , so I put everything on jsfiddle , Practically What I would like the menu stays open without clicking on ParalleloR so I would like the open class is fixed on the first menu item

 (function ($) { $(document).ready(function () { $('#cssmenu li.has-sub>a').on('click', function () { $(this).removeAttr('href'); var element = $(this).parent('li'); if (element.hasClass('open')) { element.removeClass('open'); element.find('li').removeClass('open'); element.find('ul').slideUp(); } else { element.addClass('open'); element.children('ul').slideDown(); element.siblings('li').children('ul').slideUp(); element.siblings('li').removeClass('open'); element.siblings('li').find('li').removeClass('open'); element.siblings('li').find('ul').slideUp(); } }); $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>'); (function getColor() { var r, g, b; var textColor = $('#cssmenu').css('color'); textColor = textColor.slice(4); r = textColor.slice(0, textColor.indexOf(',')); textColor = textColor.slice(textColor.indexOf(' ') + 1); g = textColor.slice(0, textColor.indexOf(',')); textColor = textColor.slice(textColor.indexOf(' ') + 1); b = textColor.slice(0, textColor.indexOf(')')); var l = rgbToHsl(r, g, b); if (l > 0.7) { $('#cssmenu>ul>li>a').css('text-shadow', '0 0px 0px rgba(0, 0, 0, .0)'); } else { $('#cssmenu>ul>li>a').css('text-shadow', '0 0px 0 rgba(255, 255, 255, .0)'); } })(); function rgbToHsl(r, g, b) { r /= 255, g /= 255, b /= 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, l = (max + min) / 2; if (max == min) { h = s = 0; } else { var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return l; } }); })(jQuery); 

 .widget-area .widget { padding: 40px 10px 40px 0px; } #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu { width: 100%; font-family: Roboto; color: #ffffff; } #cssmenu ul ul { display: none; } .align-right { float: right; } #cssmenu > ul > li > a { padding: 15px 25px 16px 10px; border-top: 1px solid #CACACA; cursor: pointer; z-index: 2; font-size: 12px; font-weight: 300; text-decoration: none; color: #000000; /*background: #F9F9F9;*/ } #cssmenu > ul > li > a:hover, #cssmenu > ul > li.active > a, #cssmenu > ul > li.open > a { color: #000000; } #cssmenu > ul > li.open > a { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.15); border-bottom: 0px solid #1682ba; } #cssmenu > ul > li:last-child > a, #cssmenu > ul > li.last > a { border-bottom: 0px solid #1682ba; } .holder { width: 0; height: 0; position: absolute; top: 0; right: -11px; } .holder::after, .holder::before { display: block; position: absolute; content: ""; width: 6px; height: 6px; right: 20px; z-index: 10; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } .holder::after { top: 17px; border-top: 2px solid #000; border-left: 2px solid #000; } #cssmenu > ul > li > a:hover > span::after, #cssmenu > ul > li.active > a > span::after, #cssmenu > ul > li.open > a > span::after { border-color: #eee; } .holder::before { top: 18px; border-top: 2px solid; border-left: 2px solid; border-top-color: inherit; border-left-color: inherit; } #cssmenu ul ul li a { cursor: pointer; border-bottom: 1px solid #F5F5F5; /* border-left: 1px solid #32373e; */ /* border-right: 1px solid #32373e; */ padding: 12px 42px 12px 16px; z-index: 1; text-decoration: none; font-size: 13px; color: #32373e; background: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } #cssmenu ul ul li:hover > a, #cssmenu ul ul li.open > a, #cssmenu ul ul li.active > a { background: rgb(255, 255, 255); color: #23282d; } #cssmenu ul ul li:first-child > a { box-shadow: none; } #cssmenu ul ul ul li:first-child > a { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } #cssmenu ul ul ul li a { padding-left: 30px; } #cssmenu > ul > li > ul > li:last-child > a, #cssmenu > ul > li > ul > li.last > a { border-bottom: 0; } #cssmenu > ul > li > ul > li.open:last-child > a, #cssmenu > ul > li > ul > li.last.open > a { border-bottom: 0px solid #32373e; } #cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a { border-bottom: 0; } #cssmenu ul ul li.has-sub > a::after { display: block; position: absolute; content: ""; width: 5px; height: 5px; right: 20px; z-index: 10; top: 11.5px; border-top: 2px solid #000; border-left: 2px solid #000; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } #cssmenu ul ul li.active > a::after, #cssmenu ul ul li.open > a::after, #cssmenu ul ul li > a:hover::after { border-color: #000; } .subsubm { padding-left: 44px !important; background-color: #FFFFFF !important; border: 1px !important; color: black !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='cssmenu'> <ul> <li class='active has-sub'><a href='#'><span style="font-weight: 400; font-size: 16px;">ParalleloR</span></a> <ul> <li class='active has-sub'><a href='#'><span>Consulenza legale in outsourcing per aziende</span></a> <ul> <li class="last"><a class="subsubm" href='#'><span>Modello contratto di outsourcing</span></a></li> </ul> </li> <li class='active'><a href='#'><span>Temporary management</span></a></li> <li class='active'><a href='#'><span>Consulenza società estere</span></a></li> <li class='active has-sub'><a href='#'><span>Consulenza crisi aziendale</span></a> <ul> <li><a class="subsubm" href='#'><span>Consulenza risanamento aziendale e rilancio</span></a></li> <li class="last"><a class="subsubm" href='#'><span>Cpnsulenza ristrutturazione del debito</span></a></li> </ul> </li> </ul> </li> </ul> </div> 

https://jsfiddle.net/exolon82/vpfLf78s/3/

I can not copy the code of the menu on the topic , so I put everything on jsfiddle , Practically What I would like the menu stays open without clicking on ParalleloR so I would like the open class is fixed on the first menu item

Answer 1

Just add this style

#cssmenu > ul > li > ul{display: block!important;}

Here is the FIDDLE

Answer 2

if you need the first menu to open on page load and you still want it to work as an accordion, trigger click event, on first menu item in top accordion, onload.

$('#cssmenu li.has-sub>a').on('click', function(){ 
...
});
$('#cssmenu>ul>li.has-sub>a').click();

check the fiddle