What we have: there is a project with an adaptive vertical menu, when you decrease the browser window, an icon appears, click on it, a menu opens. The problem is that the submenu does not open in the first paragraph: Literature on pre-school education. Go to the link works, but the submenu does not open. I can not understand what was done wrong

$(document).ready(function() { $(".sidebar__menu-item > a").click(function() { var ul = $(this).next(), clone = ul.clone().css({ "height": "auto" }).appendTo(".mobile__menu"), height = ul.css("height") === "0px" ? ul[0].scrollHeight + "px" : "0px"; clone.remove(); ul.animate({ "height": height }); return false; }); $('.mobile__menu > ul > li > a').click(function() { $('.sidebar__menu-item a').removeClass('active'); $(this).addClass('active'); }); $('.sidebar__menu-item ul li a').click(function() { $('.sidebar__menu-item ul li a').removeClass('active'); $(this).addClass('active'); }); }); 
 .mobile-menu { display: block; width: 100%; background: $stack-color; line-height: 1.6em; font-weight: 400; position: relative; margin: -5px auto; } .mobile-menu ul { list-style-type: none; margin: 0 auto; padding-left: 0; text-align: center; width: 100%; position: absolute; background: $stack-color; } .mobile-menu > ul > li { position: relative; } /*Create a horizontal list with spacing*/ .mobile-menu li { display: inline-block; /*float: left; margin-right: 1px;*/ } /*Style for menu links*/ .mobile-menu li a { display: block; min-width: 140px; text-align: center; font-size: 13px; color: #fff; text-transform: uppercase; background: lighten($stack-color, 5%); text-decoration: none; padding: 5px 0; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .mobile-menu .sidebar__menu-item > ul { height: 0; overflow: hidden; background: #eee; } /*Hover state for top level links*/ .mobile-menu li:hover a { color: #fff; background-color: $stack-color; } /*Style for dropdown links*/ .mobile-menu li:hover ul a { background: #f3f3f3; color: #fff; height: 40px; line-height: 40px; } /*Hover state for dropdown links*/ .mobile-menu li:hover .mobile-menu ul a:hover { color: #4db3ff; } /*Hide dropdown links until they are needed*/ .mobile-menu li ul { display: none; } /*Make dropdown links vertical*/ .mobile-menu li ul li { display: block; float: none; } /*Prevent text wrapping*/ .mobile-menu li ul li a { width: auto; min-width: 100px; padding: 0 20px; } /*Style 'show menu' label button and hide it by default*/ .mobile-menu .show-menu { text-decoration: none; color: #2f8db3; background: transparent; text-align: center; padding: 10px 15px; display: none; cursor: pointer; text-transform: uppercase; margin-bottom: 0; position: absolute; top: -215px; right: 0; } .mobile-menu .show-menu span { padding-left: 0; padding-right: 10px; } /*Hide checkbox*/ .mobile-menu input[type=checkbox] { display: none; } /*Show menu when invisible checkbox is checked*/ .mobile-menu input[type=checkbox]:checked ~ #sidebar__menu-list { display: block; } /*Responsive Styles*/ @media screen and (max-width: 991px) { .mobile-menu .lines { border-bottom: 15px double #2f8db3; border-top: 5px solid #2f8db3; content: ""; height: 5px; width: 30px; padding-right: 15px; padding-top: 5px; float: none; display: inline-block; vertical-align: middle; } /*Make dropdown links appear inline*/ .mobile-menu ul { position: absolute; display: none; z-index: 100; } /*Create vertical spacing*/ .mobile-menu li { margin-bottom: 0; } /*Make all menu links full width*/ .mobile-menu ul li, .mobile-menu li a { width: 100%; } /*Display 'show menu' link*/ .mobile-menu .show-menu { display: block; } } .mobile__menu { margin: 0px auto; max-width: 270px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; overflow: hidden; } .mobile__menu ul { list-style: none; margin: 0; padding: 0; text-align: left; } .mobile__menu > ul > li { position: relative; } .mobile__menu > ul > li > a { border-bottom: 1px solid #222; display: block; min-width: 140px; text-align: center; font-size: 13px; color: #fff; text-transform: uppercase; background: lighten($stack-color, 5%); text-decoration: none; padding: 5px 0; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .mobile__menu .sidebar__menu-item > ul { height: 0; overflow: hidden; background: #eee; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="mobile-menu"> <label for="show-menu" class="show-menu"> <span>ΠšΠ°Ρ‚Π°Π»ΠΎΠ³</span> <div class="lines"></div> </label> <input type="checkbox" id="show-menu"> <ul class="sidebar__menu-list" id="sidebar__menu-list"> <li class="sidebar__menu-item"> <a href="catalog.html" class="sidebar__menu-link">Π›ΠΈΡ‚Π΅Ρ€Π°Ρ‚ΡƒΡ€Π° ΠΏΠΎ Π΄ΠΎΡˆΠΊΠΎΠ»ΡŒΠ½ΠΎΠΌΡƒ ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΡŽ</a> <ul class="drop"> <li><a href="#">Английский язык для дошкольников</a> </li> <li><a href="#">КомплСксного Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ Ρ€Π΅Π±Π΅Π½ΠΊΠ°</a> </li> <li><a href="#">ΠœΠ°Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠ° для дошкольников</a> </li> <li><a href="#">ΠžΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰ΠΈΠΉ ΠΌΠΈΡ€ для дошкольников</a> </li> <li><a href="#">Письмо для дошкольников</a> </li> <li><a href="#">Π Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ ΠΌΡ‹ΡˆΠ»Π΅Π½ΠΈΡ Ρƒ дошкольника</a> </li> <li><a href="#">Π Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ Ρ€Π΅Ρ‡ΠΈ дошкольников</a> </li> <li><a href="#">Русский язык для дошкольников</a> </li> </ul> </li> <li class="sidebar__menu-item"> <a href="#" class="sidebar__menu-link">Π£Ρ‡Π΅Π±Π½ΠΈΠΊΠΈ для Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ ΡˆΠΊΠΎΠ»Ρ‹</a> </li> <li class="sidebar__menu-item"> <a href="#" class="sidebar__menu-link">Основная школа (5-11) класс</a> </li> <li class="sidebar__menu-item"> <a href="#" class="sidebar__menu-link">Π˜Π½ΠΎΡΡ‚Ρ€Π°Π½Π½Ρ‹Π΅ языки</a> </li> <li class="sidebar__menu-item"> <a href="#" class="sidebar__menu-link">Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π»ΠΈΡ‚Π΅Ρ€Π°Ρ‚ΡƒΡ€Π°</a> </li> <li class="sidebar__menu-item"> <a href="#" class="sidebar__menu-link">Π•Π“Π­ ΠΈ Π“Π˜Π</a> </li> </ul> </div>

    1 answer 1

    Good day!

     height = ul.css("height") === "0px" ? ul[0].scrollHeight + "px" : "0px";

    As I understood the error here. for the block, the height is always 0px. The reason is simple - scrollHeight is not applicable in jQuery.

    Here is a link to the explanation (not sure what the working example is) http://webonrails.ru/post/396376462589959881/

    As it turned out, the problem was in the css rule display: none, which extended to the inner elements of ul, and therefore set the height of the element to 0. And because of what the script did not work.

    • Hello, but see it tried on jsfiddle and everything is ok: jsfiddle.net/martynyuk/3u943096/2 - sagan
    • one
      Well, there may be a lot of options, but I managed to reproduce the behavior - jsfiddle.net/3u943096/6 - I just changed ul [0] to ul. It turns out that the error lies in the behavior when accessing ul (after all, this is how it leads on your site). - alexoander
    • one
      I knocked an element directly through the console $ (". Sidebar__menu-item: first ul.drop") [0] .scrollHeight - and received 0 in response. There is a chance that the error is not in JS, but in styles - the style is somewhere overlapping and sets the height to 0 regardless of the circumstances. - alexoander
    • I understood, but this is where this style is, I’ve been busy with this menu for 2 hours and it's all to no avail - sagan
    • .mobile-menu ul { position: absolute; /* display: none; */ z-index: 100; } .mobile-menu ul { position: absolute; /* display: none; */ z-index: 100; } Here I found a problem - the displa is commented out in the site code, but for some reason it is used when working with the site itself. When I turned it off (display: none rule for this block) - ul appeared as needed. (439 line in main.css - maybe something is wrong in sass, just put display: none) - alexoander