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浮动到其他元素的顶部，这听起来更像你想要的。但是，将它浮动到顶部是很困难的，并且在不同的浏览器中需要不同的方法，所以最简单的方法就是将所有其他项目设置为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

将所有内容包裹在另一个div中的container 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"});
});

在div中移动内容？

5 个答案: