javascript - jQuery Toggle 第二次无法正常工作

Question

我试图在每次点击时更改 div 的高度。根据第一次点击的内容给出固定高度，然后在第二次点击时给出默认高度/自动高度。但是以下代码仅在第一次切换时有效，当我再次单击它时它不起作用，第二次不设置高度自动/默认值。谁能告诉我代码有什么问题，在新的 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');