jquery根據上面的元素動態地，平滑地調整底部元素

Question

我有一個固定的外部div和三個div的情況，其中中間的一個是可切換的。在隱藏這個div時，我想讓底部div在同一時間增加高度，以便它佔據空的空間。

當中間div再次顯示時，我想同時降低底部div的高度。但是，即使我只是反轉隱藏代碼，底部div的高度不會按預期進行調整。

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

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

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

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

我提出的代碼中使用的單個按鈕來切換，而不是兩個。此外，您的按鈕是空的href屬性的<a>標籤。它正在關閉文件，一切都變得空白。要創建一個href不會在任何地方給你，像這樣做：

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

這個片段將保存#toggle div的內部高度的屬性data-height。它將在稍後用於調整div的高度#bottom。

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

#outer { 
 
    width: 300px; 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
#toggle, #bottom { 
 
    border: 1px solid red; 
 
}

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

你也結合這兩個展會和隱藏事件相同的處理程序：

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

當您單擊該按鈕，它試圖既展示和同時隱藏#toggle。