jQuery Animate to Auto Height and back

Question

有一个元素列表，我需要在点击第一个元素时展开它，然后滚动到上一个高度（也点击第一个元素）。

＆＃13;

＆＃13;

var $body = $('body');
	
	function languagesListDropdown() {
		$body.on('click', '#language li a.chosen', function (e) {
			var $languagesList = $('#language');
			
			if (!$languagesList.hasClass('opened')) {
				var curHeight = $languagesList.height();
				$languagesList.css('height', 'auto');
				var autoHeight = $languagesList.height();
				$languagesList.height(curHeight).animate({height: autoHeight}, 300, function(){
					$(this).addClass('opened');
				});
			} else {
			}
			
			
			return false;
		});
	}
	
	languagesListDropdown();

＆＃13;

.language {
  position: absolute;
  top: 20px;
  left: 10px;
  width: 60px;
  height: 32px;
  overflow: hidden;
  border: 2px solid #f6e8d9;
}

.language:after {
  position: absolute;
  top: 12px;
  right: 7px;
  width: 0;
  height: 0;
  cursor: pointer;
  border-color: #636264 transparent transparent transparent;
  border-style: solid;
  border-width: 6px 4px 0 4px;
  content: '';
}

.language > li {
  width: 100%;
  height: 28px;
}

.language > li a {
  display: block;
  height: 28px;
  padding: 7px 20px 0 8px;
  overflow: hidden;
  color: #636264;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="language" id="language">
					<li>
						<a href="#" class="chosen">es</a>
					</li>
					<li>
						<a href="#">en</a>
					</li>
					<li>
						<a href="#">fr</a>
					</li>
					<li>
						<a href="#">lat</a>
					</li>
				</ul>

＆＃13;

＆＃13;

＆＃13;

我的功能扩展了列表，但我不知道如何将其汇总到以前的高度？

Answer 1

JavaScript或CSS转换的一个问题是height: auto或width: auto 不能动画！所以你可以做一件事：

$languagesList.css('height', 'auto');
$languagesList.css('height', $languagesList.height());

这将计算元素的auto高度。您可以在动画中使用它，方法是将它们存储在.data()对象中或使用变量。

您的最终代码将是：

var $body = $('body');

$('#language').data("orig-height", $('#language').height())

function languagesListDropdown() {
    $body.on('click', '#language li a.chosen', function (e) {
        var $languagesList = $('#language');

        if (!$languagesList.hasClass('opened')) {
            var curHeight = $languagesList.height();
            $languagesList.css('height', 'auto');
            var autoHeight = $languagesList.height();
            $languagesList.height(curHeight).animate({
                height: autoHeight
            }, 300, function () {
                $(this).addClass('opened');
            });
        } else {
            var curHeight = $languagesList.height();
            orig_height = $('#language').data("orig-height");
            $languagesList.height(curHeight).animate({
                height: orig_height
            }, 300, function () {
                $(this).removeClass('opened');
            });
        }
        return false;
    });
}

languagesListDropdown();

小提琴：http://jsfiddle.net/mgLvz8sw/

Answer 2

快速又脏，但您可以将原始高度存储在变量中并引用它。

var $body = $('body');
var original_height = $('#language').height();
function languagesListDropdown() {
    $body.on('click', '#language li a.chosen', function (e) {
        var $languagesList = $('#language');
        var curHeight = $languagesList.height();
        if (!$languagesList.hasClass('opened')) {
            $languagesList.css('height', 'auto');
            var autoHeight = $languagesList.height();
            $languagesList.height(curHeight).animate({height: autoHeight}, 300, function(){
                $(this).addClass('opened');
            });
        } else {
            $languagesList.height(curHeight).animate({height: original_height}, 300, function(){
                $(this).removeClass('opened');
            });
        }


        return false;
    });
}

languagesListDropdown();