单击我的 jQuery 事件后，如何移动其他 div？答案

【问题标题】：How do I move others divs around upon clicking my jQuery event?单击我的 jQuery 事件后，如何移动其他 div？
【发布时间】：2016-02-08 15:39:36
【问题描述】：

我在我的网页中插入了一个 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();
    });
});

【问题讨论】：

几乎可以肯定，因为阻挡你展开的元素的元素是绝对定位或固定位置的。
如果我错了，请纠正我，但默认情况下，除非另有说明，否则 div 是绝对定位的，对吧？如果是这样，我需要另外指定，以便这些 div 移动以适应？
不，position: static 是默认值。
这是不正确的。 div 有块布局（而不是内联）；这与绝对/相对位置完全不同。
好的，谢谢指正。因此，我是否需要将下面的每个 div 列为“位置：相对”？

标签： javascript jquery html css

【解决方案1】：

问题很可能与您为父容器设置了固定高度并尝试展开子容器有关。

更改以下行：

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

到

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

以便在子级也扩展时允许父级扩展。

在这里检查小提琴：https://jsfiddle.net/n1dwz8v1/

【讨论】：

【解决方案2】：

这是您正在寻找的行为吗？

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

【讨论】：

【解决方案3】：

使用这个：

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

【讨论】：