單擊jQuery事件后如何移動其他div？

Question

我在網頁中插入了一個jQuery事件，它允許頁面中的div擴展以顯示更多內容。 我周圍的div不能向下移動以容納顯示擴展div所需的空間時遇到問題。

我最初在一個單獨的文檔中對該div進行了測試，發現它可以正常工作而不會引起過多麻煩。 我與其他div一起工作以確保他們在單擊該事件時會移動。 但是，在將相同的代碼插入到我已經開發的網頁中之后，周圍的div保持固定，並且在這些div后面進行了擴展。 為什么會這樣呢？ 可能是我的div下方的div之一以某種方式固定了嗎？

我研究了CSS屬性的“位置”，但無法在導致問題的這些屬性之間建立任何聯系。

如果問題與我的擴展div（而不是周圍的div）有關，則我將僅發布與我網頁的特定部分直接相關的HTML，CSS和Javascript / jQuery的代碼。 如果您認為有必要，請請求其他任何代碼。

感謝您抽出寶貴的時間閱讀。

這是我的代碼：

的HTML

<div id="showmorelocations-container"><p>More Locations</p>
    <div class="toggler-expand">

    </div>
</div>

的CSS

#showmorelocations-container {
    height: 100px;
    line-height: 150px;
    width: auto;
    margin: auto;
    margin-bottom: 50px;
}

#showmorelocations-container p {
    text-align: center;
    font-family: 'Hind', sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    line-height: 100px;
}

.toggler-expand {
    height: 400px;
    width: auto;
    background-color: #FFBBBB;
    display: none;
    margin-top: -25px;
}

jQuery的

$(function() {
    $('#showmorelocations-container').click(function() {
        $(this).find('.toggler-expand').slideToggle();
    });
});

Answer 1

這是您要尋找的行為嗎？

 $( document ).ready(function() { $('#showmorelocations-container').click(function() { $(this).find('.toggler-expand').slideToggle(); }); }); 

 #showmorelocations-container { height: 100px; line-height: 150px; width: auto; margin: auto; margin-bottom: 50px; background-color:#ccc } #showmorelocations-container p { text-align: center; font-family: 'Hind', sans-serif; font-size: 20px; font-weight: bold; text-decoration: none; position: relative; top: 50%; transform: translateY(-50%); line-height: 100px; } .toggler-expand { height: 400px; width: auto; background-color: #FFBBBB; display: none; margin-top: -25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="showmorelocations-container"> <p>More Locations</p> <div class="toggler-expand"> <p>Content</p> </div> </div> 

Answer 2

該問題最有可能與以下事實有關：您為父容器設置了固定高度並嘗試擴展子容器。

更改以下行：

#showmorelocations-container {
   height: 100px;  // change px to %
   ...
}

至

#showmorelocations-container {
   height: 100%;
   ...
}

如果孩子也擴大，則允許父母擴大。

在這里檢查小提琴： https : //jsfiddle.net/n1dwz8v1/

Answer 3

用這個 ：

$(function() {
    $('#showmorelocations-container p').click(function() {
        $(this).parent().find('.toggler-expand').slideToggle();
    });
});