javascript - jQuery "Slide"效果绕过 <br>

Question

我正在使用 jQuery“幻灯片”效果制作一个小网站。我在 3 个 div 标签上多次使用它。我有一个 div 标签触发另一个 div 标签滑入/滑出。我希望每个“行”有一个“动态”(移动的)div 标签和一个“静态”(触发动态的)。我遇到的问题是，每当单击“静态”标签后隐藏“动态”标签时，下一个“静态”div 标签就会向上移动一行，使其看起来非常糟糕。如果我还不够清楚，我会在最后提供一个 JSFiddle。单击较细的 div 使较粗的 div 移动。

HTML:

<div class="tabs">
<div id="static1" class="static"></div>
<div id="dynamic1" class="dynamic"></div>
<br><div id="static2" class="static"></div>
<div id="dynamic2" class="dynamic"></div>
<br><div id="static3" class="static"></div>
<div id="dynamic3" class="dynamic"></div>
</div>

JS:

$("#static1").click(function() {
    $("#dynamic1").toggle("slide", { direction: "right" }, 1000);
});
$("#static2").click(function() {
    $("#dynamic2").toggle("slide", { direction: "right" }, 1000);
});
$("#static3").click(function() {
    $("#dynamic3").toggle("slide", { direction: "right" }, 1000);
});

CSS:

.dynamic {
overflow: hidden;
width: 100px;
height: 150px;
background: #ccc;
border-top:1px solid #000;
border-right:0px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #000;
float: right;
background:url('../img/bg_tile.jpg') #333d43;
}

.static {
width: 20px;
height: 150px;
background: #ccc;
border: 1px solid #000;
float: right;
background:url('../img/bg_tile.jpg') #333d43;
}

.tabs {
overflow: hidden;
float: right;
}

JSFiddle: http://jsfiddle.net/3T9je/

Answer 1

您需要 1) 清除 .dynamic 上的左侧 float 样式和 2) 清除 .static 上的右侧 float 像这样的风格:

.dynamic {
   ...
   clear:left;
}

.static {
   ...
   clear:right;
}

演示:http://jsfiddle.net/3QfCf/2/show
来源:http://jsfiddle.net/3QfCf/2/

但无法确切解释原因。我尝试清除静态的两者，但这导致了布局问题。

编辑:我还删除了不需要的 <br>标签