[英]how to only show specific element when another is clicked
I have a set of tabs that will each contain there own set of questions with each question having a specific answer. 我有一组选项卡,每个选项卡都包含一组自己的问题,每个问题都有特定的答案。
The tab structure is sound and exactly how I wanted it to be when built. 该选项卡的结构是合理的,并且完全符合我的要求。 My problem lies with the questions and answers themselves.
我的问题在于问题和答案本身。
The desired functionality is when a question is clicked the answer for that question should be shown. 所需的功能是单击问题时,应显示该问题的答案。 I have a simple grasp of it here with this JSFiddle but I am struggling on how to differentiate between what question is being clicked and therefore which answer to show.
我在这里通过JSFiddle对此有一个简单的了解,但是我正在努力如何区分正在单击的问题与要显示的答案之间。
Basic understanding of whats needed: 对所需内容的基本了解:
$('.question-text').click(function(){
$(".answer-text").toggleClass("hidden");
});
I saw this fiddle that uses jquery's closest
but cant figure out how to convert that to my particular code. 我看到了这个使用jquery
closest
小提琴 ,但无法弄清楚如何将其转换为我的特定代码。 Here is what I have tried with no avail: 这是我没有用的尝试:
$(".question").each(function(){
$('.question-text').click(function(){
var $par=$(this).closest('.answer')
$par.find(".answer-text").slideDown("1000");
});
})
Any help on this would be greatly appreciated! 任何帮助,将不胜感激!
You can remove iterating question.each and simply bind click on all the question-text. 您可以删除重复的问题。每个并简单地绑定单击所有问题文本。
When the question-text is clicked , grab the next sibling which is your answer. 单击问题文本后,抓住下一个兄弟姐妹即您的答案。
$('.question-text').click(function(){
var $par=$(this).next()
$par.find(".answer-text").toggleClass("hidden");
});
})
You can do it using parent() in your jquery, i think it is similar as FAQ question and answers view. 您可以在jquery中使用parent()来完成此操作,我认为它类似于FAQ问题和答案视图。 try the below code by replacing your class names.
通过替换您的类名尝试以下代码。
<script>
$(document).ready(function() { $(document).ready(function(){
$('.faq_question').click(function() {
if ($(this).parent().is('.open')){
$(this).closest('.faq').find('.faq_answer_container').animate({'height':'0'},500);
$(this).closest('.faq').removeClass('open');
}else{
var newHeight =$(this).closest('.faq').find('.faq_answer').height() +'px';
$(this).closest('.faq').find('.faq_answer_container').animate({'height':newHeight},500);
$(this).closest('.faq').addClass('open');
}
});
}); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.