jQuery Toggle第二次没有正常工作

Question

我每次点击时都试图改变div的高度。根据第一次单击时的内容提供固定高度，然后在第二次单击时提供高度默认值/自动。但是以下代码仅在第一次切换时起作用，当我再次单击它时它不起作用，不会在第二次设置高度auto / default。任何人都可以告诉我代码有什么问题，在新的jQuery版本中如何编写切换功能。如果我在较新版本中写入切换功能，按钮就会消失。

 $('.item-inner .circle').toggle(function(){
		var itemHeight = $(this).parents('li').siblings('li').children('.item').height();
		$(this).parents('.item').addClass('active');
		$(this).parents('.item').height(itemHeight);
	}, function(){
		$(this).parents('.item').removeClass('active').delay(1000).queue(function() {
			$(this).height('');
		});
	});

ul, li {
   list-style: none; 
 padding: 0;
  margin: 0;
 }

.circle {
    background: #c8d3d8;
    padding: 10px;
    display: inline-block;
    cursor: pointer;
  }
.item {
    border: 2px solid #c8c8c8;
    padding: 10px;
    margin-bottom: 10px;
  }
.item.active {
    background-color: #c4c4c4;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<ul>
  <li>
    <div class="item">
      <div class="item-inner">
        <p>Lorem ipsum dolor sit amet, nec ea modus graece scaevola, sed explicari vituperata ut. Possim oportere eu his, velit intellegam eos an, cum no discere perfecto. Et sed congue nominati. Sit vero dolorem invidunt ea, ius quis munere eu.</p>
        <span class="circle">click me</span>
       </div>
    </div>
   </li>
  <li>
    <div class="item">
      <div class="item-inner">
        <p>Lorem ipsum dolor sit amet, nec ea modus graece scaevola, sed explicari vituperata ut. Possim oportere eu his, velit intellegam eos an, cum no discere perfecto. Et sed congue nominati. Sit vero dolorem invidunt ea, ius quis munere eu.</p>
        <span class="circle">click me</span>
       </div>
    </div>
   </li>
  <li>
    <div class="item">
      <div class="item-inner">
        <p>Lorem ipsum dolor sit amet, nec ea modus graece scaevola, sed explicari vituperata ut. Possim oportere eu his, velit intellegam eos an, cum no discere perfecto. Et sed congue nominati. Sit vero dolorem invidunt ea, ius quis munere eu.</p>
        <span class="circle">click me</span>
       </div>
    </div>
   </li>
  <li>
    <div class="item">
      <div class="item-inner">
        <p>Lorem ipsum dolor sit amet, nec ea modus graece scaevola, sed explicari vituperata ut. Possim oportere eu his, velit intellegam eos an, cum no discere perfecto. Et sed congue nominati. Sit vero dolorem invidunt ea, ius quis munere eu.</p>
        <span class="circle">click me</span>
       </div>
    </div>
   </li>
</ul>

Answer 1

看起来你想在切换时取消高度，改变：

$(this).height('');

到

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