继承代码: http://jsfiddle.net/t2nite/KCY8g/
我正在使用jquery创建这些隐藏框。
每个框都有一些文字和“显示”和“隐藏”按钮。我正在尝试创建一个“SHOW / HIDE all”按钮。
但是当我尝试底部的代码时,整个按钮消失了。
$("#btn").toggle(function() {
$(".para2, .para3, .para4").hide(200);
$(".para2, .para3, .para4").show(200);
});
这是我能得到的最接近的东西。
$("#btn").click(function() {
$(".para2, .para3, .para4").toggle(200);
});
顶部的代码可以工作,但不是隐藏或显示所有框,而只是在hide和show之间切换它们。帮助
我只想隐藏内容,按钮不在para类中。
答案 0 :(得分:2)
您需要遍历每个元素以检查它们是否隐藏。这实际上取决于你是想先隐藏它们还是全部显示它们。这就是你需要的:
// To toggle each element's state
$("#btn").click(function() {
$(".para2, .para3, .para4").each(function (index, element) {
if ($(this).is(':visible')) {
$(this).hide(200);
} else {
$(this).show(200);
}
});
});
// To show all and hide all afterwards or vice-versa (change the attr check)
$("#btn").click(function() {
if ($(this).attr('data-show')) {
$(".para2, .para3, .para4").show(200);
$(this).attr('data-show', false);
} else {
$(".para2, .para3, .para4").hide(200);
$(this).attr('data-show', true);
}
});
// To hide all if one is shown
$("#btn").click(function() {
var oneShown = false;
$(".para2, .para3, .para4").each(function (index, element) {
if ($(this).is(':visible')) {
oneShown = true;
}
});
if (oneShown) {
$(".para2, .para3, .para4").hide(200);
} else {
$(".para2, .para3, .para4").show(200);
}
});
答案 1 :(得分:0)
您想在.toggle
事件中使用这两个回调:
$("#btn").toggle(function() {
$(".para2, .para3, .para4").hide(200);
}, function() {
$(".para2, .para3, .para4").show(200);
});
小提琴:http://jsfiddle.net/gromer/CDEMS/
我假设那是你试图切换的东西?
答案 2 :(得分:0)
我认为你需要的是:
$("#btn").data('tgl','hide').click(function() {
if ($(this).data('tgl') == 'hide') {
$(".para2, .para3, .para4").hide(200);
$(this).data('tgl','show');
} else {
$(".para2, .para3, .para4").show(200);
$(this).data('tgl','hide');
}
});
见工作demo
答案 3 :(得分:0)
我对使用类而不是具有特定ID的元素进行了一些更改,因此您可以使此基于行为(因此需要更少的代码并使添加或删除itsawrap
元素更容易)。
HTML:
<div id="showall"><button id="btn">HIDE/SHOW ALL</button></div>
<div class="itsawrap">
<button class="hide">HIDE</button>
<button class="show">SHOW</button>
<p class="para2">"Who you callin' pinhead?"</p>
<p id="btm" class="para2">- Patrick Star</p>
</div>
<div class="itsawrap">
<button class="hide">HIDE</button>
<button class="show">SHOW</button>
<p class="para3">"He was a good man, what a rotten way to die."</p>
<p id="btm" class="para3">- JC Denton</p>
</div>
<div class="itsawrap">
<button class="hide">HIDE</button>
<button class="show">SHOW</button>
<p class="para4">"Wooooooooo!!"</p>
<p id="btm" class="para4">- Ric Flair</p>
</div>
JS:
$("#btn")
.data('shown', true)
.click(function() {
var mode = $(this).data('shown') ? 'hide' : 'show';
$('.itsawrap p')[mode](200);
$(this).data('shown', mode == 'show');
});
$('.itsawrap').on('click', '.hide', function() {
$(this).parent().find('p').hide(200);
}).on('click', '.show', function() {
$(this).parent().find('p').show(200);
});
答案 4 :(得分:0)
这里的所有代码都可以压缩成三个事件。尝试这种方法..
$("#btn").toggle(function() {
$(".para2, .para3, .para4").hide(200);
}, function() {
$(".para2, .para3, .para4").show(200);
});
$("[id^='hide']").click(function() {
$(this).closest('div').find('p').hide(200);
});
$("[id^='show']").click(function() {
$(this).closest('div').find('p').show(200);
$('.itsawrap').not($(this).closest('div')).find('p').hide(200);
});
<强> CHECK FIDDLE 强>