How to make the element height return to the initial state?

jsfiddle example

var memoria = $('.menu__drop').height(); $('.children_menu__list').hover(function() { $('.children_menu__drop', this).show(); var menuDropInner = $('.children_menu__drop', this).height(); var menuDrop = $('.menu__drop').height(); var result = 0; if(menuDropInner > menuDrop) { result = $('.menu__drop').height(menuDropInner); } else { result = $('.children_menu__drop').height(menuDrop); } return result; }, function() { $('.children_menu__drop', this).hide(); $('.menu__drop').height(memoria); // не срабатывает корректно });
  • And where is css and logic? - Mr. Black
  • I posted on Jsfiddle, I thought it would be more convenient to watch tm - Kiiotory
  • Thank you for corrections - Kiiotory 9:39 pm
  • Something I do not understand, return result; where is going back? Yes, and hike this entire menu can only be done on css without scripts. There is a huge crutch - Mr. Black

1 answer 1

After hover , the html style attribute recorded the value of a larger list size and when hovering over a smaller list, the old value was recorded in the menuDropInner .

Simply remove the value of $('.children_menu__drop').height(''); from the attribute $('.children_menu__drop').height('');

 memoria = $('.menu__drop').height(); $('.children_menu__list').hover(function() { $('.children_menu__drop', this).show(); menuDropInner = $('.children_menu__drop', this).height(); menuDrop = $('.menu__drop').height(); if(menuDropInner > menuDrop) { $('.menu__drop').height(menuDropInner); } else { $('.children_menu__drop').height(menuDrop); } }, function() { $('.children_menu__drop', this).hide(); $('.children_menu__drop').height(''); $('.menu__drop').height(memoria); }); 
 a{ text-decoration: none; } ul{ margin: 0; padding: 0; list-style: none; } .menu__drop{ background-color: aquamarine; } .side{ width: 200px; margin: 20px; /* padding: 10px;*/ background-color: #f0f; } .menu a{ background: #3d3d3d; color: aliceblue; padding: 10px; display: block; border-bottom: 1px solid #666; transition: all 0.5s; } .menu a:hover{ background: #666; padding: 10px 0 10px 20px; } .bgc-gray{ position: relative; } .children_menu__drop{ position: absolute; width: 100%; left: 100%; display: none; top: 0; background-color: aquamarine; } 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <body> <div class="side"> <ul class="menu"> <li class="menu__list"> <a href="#0" id="mag">Hey there</a> <div class="bgc-gray"> <!-- menuDrop--> <ul class="menu__drop"> <li><a href="#0">homepage</a></li> <li class="children_menu__list"> <a href="#0" id="office">Push me first and after link 2</a> <!-- menuDropInner--> <ul class="children_menu__drop"> <li><a href="#0">some text</a></li> <li><a href="#0">some text</a></li> <li><a href="#0">some text</a></li> <li><a href="#0">some text</a></li> <li><a href="#0">some text</a></li> <li><a href="#0">some text</a></li> <li><a href="#0">some text</a></li> </ul> </li> <li class="children_menu__list"> <a href="#0">Link_2</a> <ul class="children_menu__drop"> <li><a href="#0">some text</a></li> </ul> </li> </ul> </div> </li> </ul> </div> <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> </body>

  • Meaning in the background for the menu which will change itself depending on the number of elements in the list, without editing the CSS. - Kiiotory 10:10
  • @Kiiotory, it was necessary to add a question. What exactly do you need? - Mr. Black
  • When you hover on one of the blocks, the background is filled depending on the maximum height of ul or li, when you hover on a block with greater height, everything is OK (the backgorund appeared and disappeared), and after pointing to a block that has only one element li, the next time not performed. In jsfiddle there is a block with the inscription push me first which illustrates the problem (by the way, return really isn’t necessary thanks) - Kiiotory 10:21 pm
  • @Kiiotory, put on 'push me first' and a fill appeared. Pointed to ul with one element, removed the cursor and the bottom fill should be removed from the list? - Mr. Black
  • put on push me first -> there appeared a fill leveling the lower border of the main list and a nested (in the case of push me first it adds to the main ul in height, in the case of Link 2 it adds a fill to li) Ps should be as you indicated, only as seen after triggering on the bottom element, on the top one stops working - Kiiotory