我正在尝试将点击事件(到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>
另外作为旁注,我点击标题即可使用
打开所有切换 title.click(function() {
content.slideToggle('fast');
});
和答案
$(title).each(function() {
$(this).click(function() {
$(this).next().slideToggle('fast');
});
});
答案 0 :(得分:0)
你可以通过这种方式实现
$('.title').click(function(){function(){
$(this).next().slideToggle('fast');
}});
扩展每个
$('.title').each(function(){
$(this).next().slideToggle('fast');
});