0

Есть код

<ul>
    <li>
        <ul>
            <li>text</li>
            <li>text</li>
            <li>text</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>text</li>
            <li>text</li>
            <li>text</li>
        </ul>
    </li>
</ul>

Нужно определить высоту начальную и при клике её устанавливать. Сейчас код такой

height = "тут должна быть изначальная высота элемента";
    $('ul > li > ul').css('height','0px');    
    $('ul > li').click(function() {       
            $(this).children('ul').animate().css('height',height);
        });

как можно записать высоту элементов не создавая разных переменных?

3
  • height = $('ul > li > ul').css('height')
    – Grundy
    15 фев 2016 в 12:03
  • но li может быть сколько угодно 15 фев 2016 в 12:11
  • ну и что? :-) сохраняйте значение для верхнего уровня например
    – Grundy
    15 фев 2016 в 12:13

2 ответа 2

1

Можно хранить значение начальной высоты элемента в его data-атрибуте: https://jsfiddle.net/vkhLeL6m/

$(document).ready(function($){
    $('ul ul').each(function(){
        var $el = $(this),
            height = $el.height();
        $el.data('height', height);
        $el.height(0);
    });
    $('ul>li').click(function(){
        var $ul = $(this).children('ul');
        $ul.animate({
            'height':$ul.data('height')
        });
    });
});
0

Например вот так

$(document).ready(function(){
 var height = $('ul > li > ul').height();
 $('ul > li > ul').height(0);
 $('ul > li').click(function() {       
  $(this).children('ul').animate({
    height: height
  });
 });
});
4
  • Только не понятно для чего тебе анимировать высоту, если ты хочешь сделать выпадающий анимированый список то лучше использовать slideUp и slideDown
    – Kirya
    15 фев 2016 в 12:19
  • он криво работает, ваш пример только для одного li работать будет 15 фев 2016 в 12:19
  • ты хочешь сделать выпадающий список ?
    – Kirya
    15 фев 2016 в 12:21
  • jsfiddle.net/5ow2zc0L/1 на вот наверное то что тебе нужно
    – Kirya
    15 фев 2016 в 12:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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