我在我的网站上做了常见问题页面。并且隐藏/显示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块? 我尝试使用帮助标记,但它不起作用。
答案 0 :(得分:2)
当id匹配时,你需要.slideToggle()
内容(即如果条件,则为内部)。但是,您可以简单地将代码优化为:
function slideonlyone(thechosenone) {
$('.newboxes').not('#'+thechosenone).slideUp(600);
$('.newboxes#'+thechosenone).slideToggle(200);
}
<强> Working Demo 强>
答案 1 :(得分:2)
试试这个,
function slideonlyone(thechosenone) {
$('.newboxes').each(function (index) {
$(this).slideUp(600);
if ($(this).attr("id") == thechosenone && !$(this).is(':visible')) {
$(this).slideDown(200);
}
});
}
或者,您不需要使用循环尝试,例如,
function slideonlyone(thechosenone) {
$('.newboxes').slideUp(600);
var $id=$('#'+thechosenone);
if ( !$id.is(':visible')) {
$id.slideDown(200);
}
}
答案 2 :(得分:1)
请使用slideToggle而不是slideDown。 :)
http://jsfiddle.net/m9bdLw4c/1/
function slideonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideToggle(200);
}
else {
$(this).slideUp(600);
}
});
(编辑:对不起,我在编辑期间已经回答了。不是故意要复制!)
答案 3 :(得分:1)
为已打开的元素设置一个活动的css类。因此,您可以决定哪个元素是openend,必须在第二次单击时关闭。代码如下:
function slideonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
if( $(this).hasClass( 'active' )) {
$(this).slideUp(600).removeClass( 'active' );
} else {
$(this).slideDown(200).addClass( 'active' );
}
}
else {
$(this).slideUp(600);
}
});
}
您可以在此处找到演示:http://jsfiddle.net/p2622b1t/
答案 4 :(得分:1)
你可以试试这个..
function slideonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
if($(this).hasClass("open"))
{
$(this).slideUp(600);
$(this).removeClass("open");
}
else
{
$(this).slideDown(200);
$(this).addClass("open");
}
}
else {
$(this).slideUp(600);
}
});
}