[英]faq toggle adding selector
我有切换常见问题。
当我点击“ +”时,它会回答并显示/隐藏它。
如果我单击“ +”以及问题标题,我想进行切换。
如何使用h3
元素(问题标题) 和/或 * + * 按钮切换答案?
<div class="box boxFaq clearfix">
<div class="boxTitle">
<h3>Question</h3>
</div>
<button class="clearfix">+</button>
<div style="clear: both;"></div>
<div class="boxContent clearfix toggle">
Answer answer answer
</div>
</div>
jQuery(document).ready(function() {
jQuery('button').click(function() {
jQuery(this).next().next('.toggle').slideToggle();
if (jQuery(this).text() === '+') {
jQuery(this).html('-');
}
else {
jQuery(this).html('+');
}
});
});
将h3添加到选择器..并使用parents()
或closest()
jQuery(document).ready(function() {
jQuery('h3,button').click(function() {
var $parent=jQuery(this).parents('.boxFaq');
$parent.find('.toggle').slideToggle();
if ($parent.find('button').text() === '+') {
jQuery(this).html('-');
}
else{
jQuery(this).html('+');
}
});
});
if (jQuery(this).text() === '+') {
$('h3').text('Answer'); //Change the text here
jQuery(this).html('-');
}
else {
jQuery(this).html('+');
$('h3').text('Question'); //Again here
}
检查这个小提琴
您可以通过将其与分离包括多个选择,
。 然后,您只需要稍微修改处理程序的逻辑即可同时使用这两个元素。 尝试这个:
jQuery('.boxFaq button, .boxFaq h3').click(function() {
var $parent = jQuery(this).closest('.boxFaq');
var $btn = $parent.find('button')
$parent.find('.toggle').slideToggle();
$btn.text($btn.text() === '+' ? '-' : '+');
});
还请注意,我将+/-
逻辑修改为简单的三元表达式。
修改您的HTML代码
<div class="boxContent clearfix toggle" style="display: none;">
Answer answer answer
</div>
修改你的jQuery代码
jQuery(document).ready(function() {
jQuery('button').click(function() {
jQuery(this).next().next().slideToggle();
if (jQuery(this).text() === '+') {
jQuery(this).html('-');
}
else {
jQuery(this).html('+');
}
});
});
检查此更新的小提琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.