クリックイベント(slideToggle)をRaphaelによって描画されたドロップダウンタイトルに接続しようとしています。私が必要としているのは、ユーザーが灰色のボックスをクリックすると、コンテンツがjQueryにドロップダウンすることslideToggle
です。
レンダリングされたドロップダウンの例を次に示します。
クラスごとにつかむ
var title = $('.title'); //title div
var title_content = $('.title_content'); //title content div
var holder = $('.holder'); //holder div
var content = $('.content'); //content div
描画とテキストの折り返し(完全に機能します)が、クリックイベントの配線の部分に到達すると、正しく配線することができません。私が正しく考えている場合、これは、divを保持するたびに、タイトルにクリックイベントを作成して、コンテンツを下からスライドさせるか、少なくともそれが目的です。
$(holder).each(function() {
$(this).closest('.title').click(function() {
$(this).closest('.content').slideToggle('fast');
});
});
HTMLの構造は次のとおりです
<div class="holder">
<div class="title">
<div class="title_content" style="display: none;">
Email Questions:
</div>
</div>
<div class="content" style="display: none;">
<p class="faqtitle">
What type of email?</p>
<div class="faqanswer">
<p>
access the site.</p>
</div>
<p class="faqtitle">
receive the email?</p>
<div class="faqanswer">
<p>
1 business day.</p>
</div>
<p class="faqtitle">
email?</p>
<div class="faqanswer">
<p>
one-time email.</p>
</div>
</div>
</div>
また、補足として、タイトルを1回クリックすると、を使用してすべてのトグルを開くことができます。
title.click(function() {
content.slideToggle('fast');
});
-------------------------------------------------- -----
そして答えは
$(title).each(function() {
$(this).click(function() {
$(this).next().slideToggle('fast');
});
});