0

Как сделать возврат высоты элемента в начальное состояние?

пример на jsfiddle

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); // не срабатывает корректно
});
4
  • А где css и логика?
    – Doofy
    16 июл 2016 в 21:33
  • на Jsfiddle выложил, думал тм удобнее будет смотреть
    – Kiiotory
    16 июл 2016 в 21:35
  • Благодарю за исправления
    – Kiiotory
    16 июл 2016 в 21:39
  • Чё-то я не понимаю, return result; куда возвращается? Да и походу это всё меню можно только на css сделать без скриптов. Налицо какой-то огромный костыль
    – Doofy
    16 июл 2016 в 21:43

1 ответ 1

0

После hover в html атрибут style записалось значение большего размера списка и при наведении на меньший список в menuDropInner записывалось старое значение.

Просто удаляем из атрибута это значение $('.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>

11
  • Смысл в фоне за меню который будет изменяться сам в зависимости от количества элементов в списке, без правки CSS.
    – Kiiotory
    16 июл 2016 в 22:10
  • @Kiiotory, это нужно было в вопрос добавлять. Что конкретно нужно?
    – Doofy
    16 июл 2016 в 22:11
  • При наведении на один из блоков заполняется background в зависимости от наибольшей высоты ul или li, при наведении на блок с большей высотой все ок( backgorund появился и исчез), а посля наведения на блок у которого только один элемент li, проверка при следующем наведении уже не выполняется. В jsfiddle есть блок с надписью push me first который илюстрирует проблему(да кстати return действительно не нужен спасибо)
    – Kiiotory
    16 июл 2016 в 22:21
  • @Kiiotory, навели на 'push me first' и появилась заливка. Навели на ul с одним элементом, убрали курсор и заливка снизу у списка должна убраться?
    – Doofy
    16 июл 2016 в 22:26
  • навели на push me first -> появилась заливка выравнивающая нижнюю границу основного списка и вложенного(в случае с push me first она добавляет к основному ul в высоте, в случае с Link 2 она добавляет заливку к li) P.s.да должно быть как вы указали, только как видно после срабатывания на нижнем элементе, на верхнем перестает работать
    – Kiiotory
    16 июл 2016 в 22:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.