统一设置所有div的高度

Question

我在 div.

中有一个带有向上滑动和向下滑动动画的下拉菜单

打开下拉菜单时，div 的高度为 124px，否则为 20px。我有另一个 div，其高度应等于第一个 div 的高度，即使在设置 div 下拉菜单的高度动画时也是如此。

我正在使用 jquery 1.11.0

这是我的代码：

$( ".dropdown" ).hide();
$('.title').on('click', function(){
  var element = $(".dropdown");
  if (element.hasClass('open')) {
    element.removeClass('open');
    element.slideUp();
  }
  else {
    element.addClass('open');
    element.slideDown();
  }
});

here is my fiddle.

我能做什么？

编辑： 我只希望 div 的高度始终相同。

当 div 1 高度发生变化时，js/jQuery 应将相同的高度设置为 div 2。

$(".dropdown").hide();
$('.title').on('click', function() {
  var element = $(".dropdown");
  if (element.hasClass('open')) {
    element.removeClass('open');
    element.slideUp();
  } else {
    element.addClass('open');
    element.slideDown();
  }
});

.d1 {
  border: 1px solid #333;
}
.d2 {
  border: 1px solid #333;
}
.title {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="d1">
  <a class="title">title(click here)</a>
  <ul class="dropdown">
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
  </ul>
</div>
<br/>
<div class="d2">
  <a>victim</a>
</div>

Answer 1

$( ".dropdown" ).hide();
$('.title').on('click', function(){
  var element = $(".dropdown");
  if (element.hasClass('open')) {
    element.removeClass('open');    
    element.slideUp();
      -get the height of the dropdown 
    // var elHeight = $('.dropdown').css('height') + 'px';
     -apply height to other div
    // $('.otherdiv').css("height",elHeight)
  }
  else {
    element.addClass('open');
    element.slideDown();
    // var elHeight = $('.dropdown').css('height') + 'px';
    // $('.otherdiv').css("height",elHeight);
  }
});

Answer 2

这非常适合你：

var slideDown = $("#d1").height();
$( ".dropdown" ).hide();
var slideUp = $("#d1").height();
$('.title').on('click', function(){
  var element = $(".dropdown");
  if (element.hasClass('open')) {
    element.removeClass('open');

    element.slideUp(400, function(){});
    $("#d2").animate({height:  slideUp}, 500);

  }
  else {
    element.addClass('open');
    element.slideDown(400, function(){});
    $("#d2").animate({height:  slideDown}, 500);

  }
});

JSFiddle

统一设置所有div的高度

Set height of all divs uniformly

javascript

jquery

height

dropdown