Question

我有一种情况，我有一个固定的外部div和三个div，其中中间的一个是可以切换的。在隐藏这个div时，我希望底部div同时增加高度，以便占用空白区域。

当再次显示中间div时，我希望底部div同时减小高度。但是，即使我只是反转隐藏代码，底部div的高度也不会按预期调整。

＆＃13;

$(document).ready(function() {
    	var bottomHeight = $('#outer').height() - $('#top').height();
      $('#bottom').css({'height': bottomHeight + 'px'});
    });
    
    // Hide toggle
    $('.button a').click(function() {
    	var bottomHeight = $('#bottom').height(),
      		toggleHeight = $('#toggle').height(),
          togglePadding = parseInt($('#top').css('padding-bottom')) * 2,
          newHeight = bottomHeight + toggleHeight + togglePadding;
      $('.hide').slideUp();
      $('.show').slideDown();
    	$('#toggle').slideUp(400);
      $('#bottom').animate({
          height: newHeight + 'px'
        }, {duration: 400, queue: false});
    });
    
    // Show toggle
    $('.button a').click(function() {
    	var bottomHeight = $('#bottom').height(),
      		toggleHeight = $('#toggle').height(),
          togglePadding = parseInt($('#top').css('padding-bottom')) * 2,
          newHeight = bottomHeight - (toggleHeight + togglePadding);
      $('.show').slideUp();
      $('.hide').slideDown();
      $('#toggle').slideDown(400);
      $('#bottom').animate({
          height: newHeight + 'px'
        }, {duration: 400, queue: false});
    });

＆＃13;

#outer {
      width: 200px;
      height: 500px;
      border: 1px solid black;
      padding: 10px;
    }
    
#toggle {
      padding: 20px 0;
    }
    
#bottom {
      border: 1px solid red;
      overflow-y: auto;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button show" style="display: none">
      <a href="">Show</a>
    </div>
    <div class="button hide">
      <a href="">Hide</a>
    </div>
    <div id='outer'>
      <div id="top">
        <div id="fixed">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus facere itaque similique, nulla quos quae, et suscipit est quia vitae aperiam magni ex error accusantium obcaecati repellat excepturi dolor facilis.
        </div>
        <div id="toggle">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, eos laboriosam eveniet consequatur dolores, eaque molestias cupiditate quidem quasi mollitia. Vero sequi eos quia nostrum perspiciatis temporibus maxime ex? Numquam.  
        </div>
      </div>
      <div id="bottom">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quis dolorum ad molestias facere rerum expedita minus natus voluptatum debitis cumque dolore sint ea saepe neque necessitatibus est, optio dolorem.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, fuga, soluta sint blanditiis optio similique, explicabo deleniti debitis veniam doloremque fugit qui voluptatem nulla magnam quos perspiciatis recusandae provident corrupti.</p>
      </div>
    </div>

＆＃13;

JSFiddle

Answer 1

我改变了你的代码，这就是我所做的：

$('.button a').click(function() {
  if ($("#toggle").is(":visible")) {
    $("#bottom").animate({
      height: $("#bottom").height() + midHeight
    });
    $(this).text("Show");
  } else {
    $("#bottom").animate({
      height: $("#bottom").height() - midHeight
    });
    $(this).text("Hide");
  }
  $("#toggle").toggle("height");
});

我只用了一个按钮来完成这项工作。

Here is the JSFiddle demo

Answer 2

我让代码使用一个按钮来切换，而不是两个。此外，您的按钮是<a>标记，其中包含空href属性。它正在关闭文档，一切都变得空白。要创建一个不会发送到任何地方的href，请按以下方式执行此操作：

<a href="#">Some link</a>
<!-- ----^ -->

此代码段会在#toggle属性中保存data-height div的内部高度。它稍后将用于调整#bottom div的高度。

＆＃13;

$(document).ready(function() {
  var bottomHeight = $('#outer').height() - $('#top').height();
  $('#bottom').css({
    'height': bottomHeight + 'px'
  });
});

$('#toggleBtn').click(function() {
  $(this).toggleClass("toggled");

  var $toggle = $("#toggle"),
    $bottom = $("#bottom");

  var bottomHeight = $bottom.height();
  var toggleHeight = $toggle.innerHeight();
  var toggleHeightAttr = $toggle.attr("data-height");

  if ($(this).hasClass("toggled")) {
    $toggle.attr("data-height", toggleHeight);
    $toggle.slideUp(400);
    $bottom.animate({
      height: (bottomHeight + toggleHeight) + "px"
    }, {
      duration: 400
    });
  } else {
    $toggle.slideDown(400);
    $bottom.animate({
      height: (bottomHeight - toggleHeightAttr) + "px"
    }, {
      duration: 400
    });
  }
});

＆＃13;

#outer {
  width: 300px;
  border: 1px solid black;
  padding: 10px;
}

#toggle, #bottom {
  border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="toggleBtn" type="button" value="Toggle!">
<div id='outer'>
  <div id="top">
    <div id="fixed">
      Fixed lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div id="toggle">
      Toggle lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </div>
  <div id="bottom">
    Bottom lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quis dolorum ad molestias facere rerum expedita minus.
  </div>
</div>

＆＃13;

您还将show 和隐藏事件绑定到同一个处理程序：

$('.button a').click(...);

当您点击该按钮时，它会同时尝试显示和隐藏#toggle。

Jquery动态，平滑地根据上面的元素调整底部元素

2 个答案: