Question

我已经在我的网页中插入了一个jQuery事件，它允许我页面中的div扩展以显示更多内容。我有一个问题，周围的div没有向下移动以适应显示扩展div所需的空间。

我最初在一个单独的文档中测试了这个div，发现它成功地工作而没有太多的麻烦。我与其他div合作，以确保他们在点击活动时继续前进。然而，在我已经开发的网页中插入相同的代码后，周围的div仍然是固定的，扩展工作在这些div后面。为什么会这样？可能是我扩展的那个下面的一个div在某种程度上被修复了吗？

我研究了CSS属性＆＃39; position＆＃39;但不能在这些问题之间建立任何联系。

问题与我扩展的div（而不是周围的div）有关，我只会发布HTML，CSS＆amp;的代码。 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

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

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

3 个答案: