Чтения существующей высота DIV предотвращает код от работы

Question

Для переключения высоты DIV я использую этот код, который работает очень хорошо:

$(document).ready(function() { 
    var trg = $("#hauptTextInhaltReduziert"), // The target container 
    preHeight = 420; 
    trg.css("height", preHeight); // Set the initial height on page load 
    $(".aufklappen").on("click", function() { 
    var curHeight = trg.height(); 

    if (preHeight == curHeight) { 
     var xHeight = "auto"; 
     $(this).text("-"); 
    } else { 
     var xHeight = preHeight; 
     $(this).text("+"); 
    } 

    var trgHeight = trg.css("height", xHeight).height(); 
    trg.height(curHeight).stop().animate({ 
     height: trgHeight 
    }, 600, function() { 
     trg.css("height", xHeight); 
    }); 
    }); 
}); 

Потому что это должно прийти только работать в мобильных версиях сайта , где начальная высота DIV установлен на 420px, я изменил строку # 3 это:

preHeight = $("#hauptTextInhaltReduziert").css("height"); // The initial height 

Но теперь, код не работает больше.

Итак, что не так с этой линией?

Благодарим за помощь.

Answer 1

Вы должны установить значение с помощью .css(propertyName , value), чтобы значение можно было установить непосредственно в css. В этом случае вы устанавливаете значение 420 на высоту. В css это приведет к ошибке height: 420, которая не работает.

Мое предложение состоит в том, что вы меняете это на preHeight = '420px'. Чтобы все остальное работало (поскольку .height() возвращает числовое значение), вы также должны изменить эту часть.

Следующий код должен работать:

$(document).ready(function() { 
    var trg = $("#hauptTextInhaltReduziert"), // The target container 
    preHeight = '420px'; 
    trg.css("height", preHeight); // Set the initial height on page load 
    $(".aufklappen").on("click", function() { 
    var curHeight = trg.height(); 

    if (preHeight == (curHeight + 'px')) { 
     var xHeight = "auto"; 
     $(this).text("-"); 
    } else { 
     var xHeight = preHeight; 
     $(this).text("+"); 
    } 

    var trgHeight = trg.css("height", xHeight).height(); 
    trgHeight = trgHeight + 'px'; 
    trg.height(curHeight).stop().animate({ 
     height: trgHeight 
    }, 600, function() { 
     trg.css("height", xHeight); 
    }); 
    }); 
}); 

Это должно также устранить другие проблемы.

Answer 2

Вы не можете смешивать css("height") и height(), потому что css использует расширения, например px. Поэтому используйте один метод для всех. Лучшее удобство заключается в том, чтобы держать его в цифрах, чтобы лучше работать с ...

$(function() { 
    var trg = $("#hauptTextInhaltReduziert"), 
     preHeight = 420; 

    trg.height(preHeight); 

    $(".aufklappen").on("click", function() { 
     var curHeight = trg.height(); 

     if (preHeight == curHeight) { 
      var xHeight = "auto"; 
      $(this).text("-"); 
     } else { 
      var xHeight = preHeight; 
      $(this).text("+"); 
     } 

     var trgHeight = trg.height(xHeight).height(); 

     trg.height(curHeight).stop().animate({ 
      height: trgHeight 
     }, 600, function() { 
      trg.height(xHeight); 
     }); 
    }); 
});