我在我的网站上做“常见问题解答”页面。并且在隐藏/显示div块以及对问题的答案方面存在一些问题。如果第二次单击相同的链接或其他链接,我需要隐藏块。
jsfiddle link with code here
<div class="question">
<a id="myHeader1" href="javascript:slideonlyone('newboxes1');" >First question?</a></div>
<div class="newboxes" id="newboxes1" style="display: block;" > </div>
<div class="question">
<a id="myHeader2" href="javascript:slideonlyone('newboxes2');" >Second question?</a> </div>
<div class="newboxes" id="newboxes2" style="display: none;" > </div>
JS:
function slideonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(200);
}
else {
$(this).slideUp(600);
}
});
}
如果用户第二次单击同一块,如何关闭div块?
我尝试使用帮助标记,但没有用。
最佳答案
尝试这个,
function slideonlyone(thechosenone) {
$('.newboxes').each(function (index) {
$(this).slideUp(600);
if ($(this).attr("id") == thechosenone && !$(this).is(':visible')) {
$(this).slideDown(200);
}
});
}
Working Demo
另外,您也不需要使用循环尝试,
function slideonlyone(thechosenone) {
$('.newboxes').slideUp(600);
var $id=$('#'+thechosenone);
if ( !$id.is(':visible')) {
$id.slideDown(200);
}
}
Live Demo