隐藏，显示，隐藏/ SHOWALL按钮

继承人的代码：http://jsfiddle.net/t2nite/KCY8g/隐藏，显示，隐藏/ SHOWALL按钮

我使用jQuery创建这些躲在箱子。

每个框都有一些文字和一个“SHOW”和“HIDE”按钮。我正在尝试创建一个“显示/隐藏全部”按钮。

但是，当我尝试在底部的代码整个按钮消失。

$("#btn").toggle(function() { 
    $(".para2, .para3, .para4").hide(200); 
    $(".para2, .para3, .para4").show(200); 
});

这是最接近我能达到我想要的。

$("#btn").click(function() { 
    $(".para2, .para3, .para4").toggle(200); 
});

上面的代码工作，但不是隐藏或显示所有的框，它只是在隐藏和显示之间切换它们。帮帮我。

我只想隐藏内容并且按钮不在para类内。

来源

2012-10-15 t2nite

要隐藏所有框或隐藏其内容吗？ –

您的按钮在'.para2，.para3，.para4'里面吗？ – jrummell

您需要遍历每个元素以检查它们是否隐藏。这实际上取决于你是要先隐藏还是全部展示。以下是你需要什么：

// 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); 
    } 
});

来源

2012-10-15 20:51:28

要在.toggle事件使用这两种回调：

$("#btn").toggle(function() { 
    $(".para2, .para3, .para4").hide(200); 
}, function() { 
    $(".para2, .para3, .para4").show(200); 
});

小提琴：http://jsfiddle.net/gromer/CDEMS/

我假定这就是你试图切换像？

来源

2012-10-15 20:52:55 Gromer

我想你需要的是这样的：

$("#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

来源

2012-10-15 20:54:25 Nelson

我做了一些改变使用类，而不是具有特定ID的元素，所以你能做出这样的行为为基础的（因此需要更少的代码并且更容易添加或删除元素）。

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); 
});

jsFiddle

来源

2012-10-15 20:55:58 HackedByChinese

所有的代码都可以浓缩成此三个事件..试试这个办法..

$("#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

来源

2012-10-15 21:03:34

隐藏，显示，隐藏/ SHOWALL按钮

回答

相关问题