Question

我制作了一个jQuery脚本，你可以点击按钮hide隐藏或显示一个div（第一个）

代码在脚本中如下所示：

$('.hideButton').click( function() {
    var toggleWidth = $(".first").width() == 100 ? "10px" : "100px";
    $('.first').animate({ width: toggleWidth},200);

    if ( $('.first').width() == 10 ){
        $(".content").attr("hidden",false);
    }
    else if ( $('.first').width() == 100 ){
        $(".content").attr("hidden",true);
    }

});

HTML：

<div class="contain">
    <div class="row">
            <div class="navigation">
                navigation
            </div>
            <div class="advert">
                advert
            </div>
    </div>
    <div class="row">
        <div class="main">
            main
            <br/>
            <button class="hideButton">hide</button>
            <br/>
            <div class="first">
                1
            </div>
            <div class="second">
                2
            </div>
            <div class="third">
                3
            </div>
        </div>
    </div>
</div>

CSS：

.row{
   margin-left:0px;
}
.navigation{
    height:100px;
    background-color:orange;
    width:400px;
    display:inline-block;
}
.advert{
    height:100px;
    background-color:lime;
    width:200px;
    display:inline-block;
}
.main{
    width:600px;
    height: 300px;
    background-color: magenta;
}
.first{
   width:100px;
    height:80%;
   background-color: yellow;
   display:inline-block;
}
.second{
   width:100px;
   height:80%;
   background-color: blue;
    display:inline-block;
}
.third{
   width:100px;
    height:80%;
   background-color: red;
    display:inline-block;
}

最好的方法是你在jsfiddle中看到它：http://jsfiddle.net/dzorz/EhjeA/

现在我遇到了其他两个div的问题。当我单击隐藏按钮并且第一个div获得动画时，动画中的其他两个div，都跳到第一个div的末尾，当动画完成后它们又回到原位..这真的很烦人，我不知道怎么做解决它......

我只需要一个在点击按钮时隐藏的div，并且他不会影响任何其他内容......

这个例子是否可以修复，或者你可以建议我使用一些不错的jQuery插件吗？

Answer 1

不要将这3显示为inline-block，而是移除显示并将其向左浮动，而不是使用CSS中的float: left。

JSFiddle Demo

.first{
   width:100px;
   height:80%;
   background-color: yellow;
   float: left;
}
.second{
   width:100px;
   height:80%;
   background-color: blue;
   float: left;
}
.third{
   width:100px;
   height:80%;
   background-color: red;
   float: left;
}

Answer 2

尝试将此添加到您的CSS：

.first,.second,.third {
    vertical-align: top;
}

在动画期间，overflow设置为overflow: hidden，这会导致其他内联元素向下移动。添加vertical-align: top可以解决问题。

更新小提琴：http://jsfiddle.net/EhjeA/3/

Answer 3

您可以将有问题的div包装在具有固定宽度的包装中：http://jsfiddle.net/EhjeA/1/

.wrapper {
    display: inline-block;
    width: 100px;
}

<div class="wrapper">
  <div class="first">
    1
  </div>
</div>

在jQuery中显示/隐藏Div，问题是“跳过”div

3 个答案: