Question

我搜索了几个类似的主题，但是我做错了什么，似乎没有用。

我有这个HTML结构：

<div id="form" class="inquiry-section">
  <div class="inner">
  
    <div class="inner-form-col">
      <div class="inner-form"><input type="radio"><span>some label</span></div>
      <div class="inner-ab">
        <div class="inner-straight-ab">some content</div>
      </div>
    </div>
    
    <div class="inner-form-col">
      <div class="inner-form"><input type="radio"><span>some label</span></div>
      <div class="inner-ab">
        <div class="inner-gshape-ab">some content</div>
      </div>
    </div>
    
    <div class="inner-form-col">
      <div class="inner-form"><input type="radio"><span>some label</span></div>
      <div class="inner-ab">
        <div class="inner-pshape-ab">some content</div>
      </div>
    </div>
    
    <div class="inner-form-col">
      <div class="inner-form"><input type="radio"><span>some label</span></div>
      <div class="inner-ab">
        <div class="inner-isle-ab">some content</div>
      </div>
    </div>

  </div>
</div>

我想要实现的是在 .inner-form 中点击输入到.slideDown（） .inner-ab 之后相同的 .inner-form-col 和.slideUp（）其他列中的所有 .inner-ab 。我使用.show（）/ .hide（）或切换类，但因为我需要高度：auto，我无法实现动画并重新流动下面的内容。

Answer 1

您是否尝试过jQuery Easing插件

http://gsgd.co.uk/sandbox/jquery/easing/

Answer 2

我以某种方式设法通过使用它来使其工作，但我不是百分之百确定它为什么：

$('.inner-form-col').each(function() {
  var $dropdown = $(this);

  $(".inner-form input", $dropdown).click(function(e) {
    $div = $(".inner-ab", $dropdown);
    $div.slideDown();
    $(".inner-ab").not($div).slideUp();
  });

});

根据所选的电台

2 个答案: