それで、私は自分のウェブサイトのプロジェクト セクション用にアコーディオンのようなものを作ろうとしていますが、非常に奇妙な問題に遭遇しました (または、本当に疲れているだけかもしれません)。選択範囲を展開するための最初のクリックは正常に機能しますが、ヘッダーを再度クリックして元の状態に戻すと、以前に展開されたヘッダーの内容が非表示になります。さらに、同じヘッダーをもう一度クリックすると、最初の境界線が消えた後はいつでも展開できます。
私の問題を実際に見るには、私のウェブサイトにアクセスしてください:
http://cole.quinnchrzan.com/cc2
プロジェクトセクションをクリックして、自分の目で確かめてください。
ここでコードを見たいだけなら、それは次のとおりです:
$(document).ready(function() {
var sign = 1;
$('#projects > div:not(.header)').on('click', function() {
if (sign == 1) {
$(this).css('border-bottom', 'none');
$(this).children().slideDown(400);
$(this).siblings().slideUp(400);
}
else {
$(this).css('border-bottom', '1px solid black');
$(this).children().slideUp(400);
$(this).siblings().slideDown(400);
$(this).css({
'height': '29px',
'z-index': '2'
});
}
sign = sign*-1;
});
});
そしてHTML:
<section id="projects">
<div class="header">Websites</div>
<div><a href="#">Saia LTL, Inc.</a>
<div></div>
</div>
<div><a href="#">Insurance House</a></div>
<div><a href="#">Scandinavian Collectors Club</a></div>
<div><a href="#">Casey Sills Photography</a></div>
<div class="header">Personal Projects</div>
<div><a href="#">cTV</a></div>
<div><a href="#">PoE DPS calculator</a></div>
<div><a href="#">tSlide</a></div>
</section>
'height': '29px'
'z-index': '2'
影響を受ける見出しを再度表示するために追加の cssを追加しましたが、空の div が作成されるだけです。この css がなければ、div には高さがありません。