0

我制作了一个 jQuery 脚本，您可以在其中隐藏或显示一个 div（第一个）单击按钮hide

代码在脚本中如下所示：

$('.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 插件来做同样的事情？

4

3 回答 3

2

不要将这 3 个显示为inline-block，而是删除显示并将它们向左浮动，而不是float: left在 CSS 中使用。

JSFiddle 演示

.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;
}
于 2013-09-17T14:58:37.120 回答
1

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

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

<div class="wrapper">
  <div class="first">
    1
  </div>
</div>
于 2013-09-17T14:58:46.280 回答
1

尝试将此添加到您的 CSS 中：

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

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

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

于 2013-09-17T14:56:04.507 回答