统一设置所有div的高度答案

【问题标题】：Set height of all divs uniformly统一设置所有div的高度
【发布时间】：2016-04-27 23:01:33
【问题描述】：

我在 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>

【问题讨论】：

你希望第二个 div 也有一个下拉菜单，是吗？
@Ani 请第二次查看问题。
两个 div 的高度都是20px。检查小提琴。
是的，两个 div 的高度都是 20px。我希望，当 div 1 高度扩展时，同时具有相同动画的 2nd div 将扩展。但是，不是下拉菜单。除了文本“受害者”之外，第二个 div 将是空白的（我想了解你，我不需要第一个 div 的任何内容。只用动画扩展高度）。
我认为@Rohit 已经提供了工作代码。

标签： javascript jquery height dropdown

【解决方案1】：

这对你来说是完美的：

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

【讨论】：

感谢@Rohit 的回答。除了动画之外，它可以按我的意愿工作。我想要像 1st div 一样的 2nd div 中的动画。
感谢@Rohit 的努力。一切都好。除了 2nd div,s 动画发生在 1st div,s 动画完成之后。我同时需要两者。它们看起来应该是同时伸展和同时塌陷。
@Shohidul，我有更新代码，它可以完美地满足您的需求。 :)

【解决方案2】：

$( ".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);
  }
});

【讨论】：

提供一个工作代码。这个不行，也没有解释。