谢谢参观。我正在尝试使用 jQ UI addClass / remove Class 方法在单击前面的同级 div 时展开 hr 元素。jQ UI 效果核心支持两个类之间的平滑动画过渡：http: //jqueryui.com/demos/removeClass/。此外，必须使用 $ 动态添加 hr 以实现更广泛的站点设计。
以下是拼图的部分：
- 我的代码呈现四个 100x100px 兄弟 div 的行。这些 div 没有类，但如果有帮助，请随时添加它们——每个 div 最终都会有一个独特的类。在每 4 个 div 之后，动态添加一个 hr。
- 单击任何给定的 div 后，下一小时必须切换到“打开”类，这会导致行扩展。如果再次单击此 div，它必须从 hr 切换/删除“open”类，导致 hr 缩小到其原始大小。
- 如果点击一个div展开一个hr，然后点击另一个div，则必须触发两个动画：首先，必须删除“open”类，导致行缩回，然后必须重新添加该类重新打开该行。但是，例如，如果单击一个 div 打开第二行，然后单击第一个 hr 之前的第二个 div，则此操作必须先关闭第二个 hr，然后再打开第二个 div 对应的 hr。
我被困住了。我尝试了许多 jQ 函数组合，但结果很奇怪。你看到的是我得到的最接近的。感谢您试一试。随意添加到代码中，但是你可以让它工作。
<!--HTML...the children divs of ".main" can have their own unique classes if that helps-->
<div class="main">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
/*CSS-some of this creates other events not mentioned above. These are simplified versions of what I need for my final site design*/
.main {
width: 450px;
}
.main div {
height: 100px;
width: 100px;
background-color: #000;
margin: 3px;
float:left;
}
div.select {
background-color: #f00;
border: 2px solid #00F;
margin: 3px;
float:left;
display: block;
}
div.active {
background-color: #f00;
margin: 3px;
float:left;
display: block;
}
hr {
background-color: #FF0;
float: left;
display: block;
height: 20px;
width: 450px;
}
hr.open {
float: left;
display: block;
height: 300px;
width: 450px;
}
/*the JS - sorry about the double quotes. I'm using Dreamweaver, which seems to add them to everything*/
$(document).ready(function() {
//dynamcally adds the <hr> after every 4th div.
$(".main div:nth-child(4n)").after('<hr class="closed"></hr>');
//puts a blue border on the squares
$('.main div').hover(function() {
$(this).addClass('select');
},
function() {
$(this).removeClass('select')
});
//changes the color of the active square to red and "deactivates" the previous one.
$('.main div').click(function() {
$(this).toggleClass('active').siblings().removeClass('active');
});
//here in lies the problem...???
$('.main div').click(function() {
$('hr').removeClass('open', 1000);
$(this).toggle
(function() {
$(this).nextAll("hr").first().addClass('open', 500);
},
function() {
$(this).nextAll("hr").first().removeClass('open', 500)
});
});
});