在 div 内移动内容？

Question

更新：

父 div (#container) 必须具有固定的高度。我只是想移动其中的内容，以便活动 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 浮动在其他元素的顶部，这听起来更像您想要的。然而，浮动到顶部是很困难的，并且在不同的浏览器中需要不同的方法，所以对你来说最简单的方法就是将所有其他项目设置为显示：无，然后在单击关闭该项目时再次显示：阻止您正在查看。

在这里，这满足了您的要求：

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

将 container div 内的所有内容包装在另一个 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 3

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

  $(".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 4

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

刚刚删除了 height 。

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