jquery和css解決方案在html中切換顯示/隱藏文本

Question

因此，我創建了以下顯示/隱藏div的jquery。

$(document).ready(function(){ 
    $("#me").hide(); 
    $("#hide").click(function(){ 
    $("#me").hide(); 
    }); 
    $("#show").click(function(){ 
    $("#me").show(); 
    }); 
}); 

這是一些文本 隱藏 顯示

http://jsfiddle.net/6DTeq/7/ 它工作正常。但我需要使其工作，以便不必單獨顯示和隱藏文本，我需要切換顯示和隱藏。 但主要問題是我不想在國際化目的的JavaScript文件中的文本。 沒關係，如果文本駐留在HTML中。有人可以幫我弄這個嗎？

Answer 1

<div id="me" style="display:none;"> This is some text</div> 
<div id="clickContainer"> 
    <div id="hide" style="display:none;">Hide</div> 
    <div id="show">Show</div> 
</div> 

$(document).ready(function(){ 
    $("#clickContainer").click(function(){ 
     $("#me").toggle(); 
     $("#hide").toggle(); 
     $("#show").toggle(); 
    }); 
}) 

Answer 2

HTML：

<div id="me"> This is some text</div> 
<div id="toggle">toggle</div> 

JS：

$("#toggle").click(function(){ 
    $("#me").toggle(); 
}); 

演示----->http://jsfiddle.net/6DTeq/8/

更新小提琴----->http://jsfiddle.net/6DTeq/13/

Answer 3

試試這個

$(document).ready(function(){ 
    $("#me").hide(); 
    $("#hide").click(function(){ 
     $("#me").toggle(); 
     $(this).text(function(i, val) { 
      return val === 'Show' ? 'Hide' : 'Show'; 
     }); 
    }); 
}); 

Check Fiddle

Answer 4

試一下：

http://jsfiddle.net/6DTeq/10/

$(document).ready(function() { 
    $("#toggle").click(function() { 
     $("#me").toggle(); 
     $(this).text(function(){return $('#me:visible').length?'Hide':'Show'}); 
    }).triggerHandler('click'); 
});