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

Ваш ответ

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

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