ご覧いただきありがとうございます。jQ UI の addClass / remove Class メソッドを使用して、前の兄弟 div をクリックしたときに hr 要素を展開しようとしています。jQ UI エフェクト コアにより、2 つのクラス間のスムーズなアニメーション遷移が可能になります: http://jqueryui.com/demos/removeClass/。さらに、より広範なサイト デザインを実現するには、$ を使用して hr を動的に追加する必要があります。
パズルのピースは次のとおりです。
- 私のコードは、4 つの 100x100px 兄弟 div の行をレンダリングします。これらの div にはクラスがありませんが、必要に応じて自由に追加してください。各 div には最終的に一意のクラスがあります。4 番目の div ごとに、動的に追加された hr があります。
- 任意の div をクリックすると、すぐ次の hr がクラス「open」に切り替わる必要があります。これにより、行が展開されます。この div を再度クリックすると、hr からクラス「open」をトグル/削除する必要があり、hr が元のサイズに縮小されます。
- 1 つの div をクリックして 1 時間を展開し、次に別の div をクリックした場合、2 つのアニメーションをトリガーする必要があります。まず、「開いている」クラスを削除して行を縮小し、次にクラスを再度追加する必要があります。行を再開します。ただし、たとえば、div をクリックして 2 番目の行を開き、次に最初の hr の前にある 2 番目の div をクリックした場合、このアクションではまず 2 番目の hr を閉じてから、2 番目の 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)
});
});
});