在div内移动内容？

Question

更新：

父div（#container）必须具有固定的高度。 我想在其中移动内容，以便活动div位于顶部，所有溢出都被隐藏。

---

我正在处理一个网页，其中父div的大小固定，并且其中会有几个子div。 这些子div中的每个子div都有一个始终可见的锚标记，并且它自己的子div仅在单击其同级锚标记时才会显示。

我已经做了很多工作，但是我遇到了一个问题，当显示同级div时，有时它会超出父div，并且其内容被隐藏了。 我想将此div的内容重新定位到父div的顶部，以使其内容永远不会被隐藏。 我将如何使用jQuery完成此操作？

您可以通过单击此小提琴中的Item2来查看我在说什么： http ： //jsfiddle.net/Broham/LA22t/1/

HTML：

<div id="container">
    <div class="item">
        <a href="#">Item1</a>
        <div class="desc">A bunch of stuff about item 1!</div>
    </div>
    <div class="item">
        <a href="#">Item2</a>
        <div class="desc">
            A bunch of stuff about item 2!<br/>More stuff for item 2!<br/>last item 2 thing
        </div>
    </div>
    <div class="item">
        <a href="#">Item3</a>
        <div class="desc">
            A bunch of stuff about item 3!<br/>More stuff for item 3
        </div>
    </div>
</div>

CSS：

.desc
{
 display:none;   

}

#container
{
    height:75px;
    overflow:hidden;
    border-style:solid;
    border-width:1px;
}

jQuery的：

$(".item a").click(function () {
    $(this).siblings(".desc").animate({ height: 'toggle' });
            });

到目前为止我尝试过的：

http://jsfiddle.net/Broham/LA22t/3/

但这只会移动活动的div，我需要做的是将所有内容上移并隐藏溢出...

Answer 1

你有两个选择。

您可以将其上方的所有div隐藏（从而使其显示在顶部），也可以将div浮动在其他元素的顶部，这听起来更像您想要的。 但是，将其浮动到顶部很困难，并且在不同的浏览器中需要使用不同的方法，因此，最简单的方法是将所有其他项设置为display：none，然后在单击以关闭该项目时再次显示：block您正在查看。

在这里，这就是您想要的：

$(".item a").click(function () {
    if(!this.opvar)this.opvar=false;
    $(this).siblings(".desc").animate({ height: 'toggle' });
    if(!this.opvar)$(this).parent().siblings(".item").css('display','none');
    else $(this).parent().siblings(".item").css('display','block');
    this.opvar = !this.opvar;
        });

不过，这只是一个粗略的例子，还有更好的方法。

Answer 2

这应该可以解决问题，但是您可能还想关闭不活动的标题

  $(".item a").click(function () {
       var a=  $(this).parent();
       $(this).parent().remove();
       $("#container > div.item").first().before(a);
       $('.removeMe').remove();
       $(this).siblings(".desc").animate({ height: 'toggle' });
  });

Answer 3

将container div内的所有内容都wrapper在另一个div中（例如wrapper ），然后对该wrapper div的位置（顶部）进行动画处理，以获得所需的结果。

HTML

<div id="container">
  <div id="wrapper">
    <div class="item">
.........
</div>
</div>

CSS

#wrapper{
    height:100%;
    position:relative;
}

JS

$(".item a").click(function () {
    $(this).siblings(".desc").animate({ height: 'toggle' });
    $("#wrapper").animate({top:-1*$(this).position().top},"slow");
 });

这样的事情可能会帮助您入门： http : //jsfiddle.net/sethi/zfdmC/2/

Answer 4

http://jsfiddle.net/LA22t/2/

刚拆下身高。

Answer 5

诀窍是实际移动DOM中的元素。 使用.prependTo("#container") ：

http://jsfiddle.net/LA22t/7/

$(".item a").click(function() {
    $(".desc").hide();
    $(this).parent().prependTo("#container").find(".desc").animate({height:"show"});
});