jquery的一个问题，

Question

$().ready(function(){
$btn=$("#getMap");
$map=$("#mapholder");

if($map.is(":visible")){
$btn.click(function(){
$map.hide();
$btn.text("show map");
})
}
else{
$btn.click(function(){
$map.show();
$btn.text("hide map");
})
}
})代码就上面了，
主要想点击btn，切换map的“显示”和“隐藏”；
问题是 ，现在能隐藏
隐藏之后就不能再次显示。
百思不得其解。

Answer 1

<div id="mapholder" style="height:30px;border: 1px solid red"></div>
<button id="getMap" type="button">hide map</button>
<script language="javascript" type="text/javascript">
  $(document).ready(function(){
      $("#getMap").click(function(){
          var $map=$("#mapholder");
          if($map.is(":visible")){
              $map.hide();
              $(this).html("show map");
          }else{
              $map.show();
              $(this).html("hide map");
          }
      })
  });
</script>

Answer 2

<script>
$(document).ready(function(){
var $btn = $("#getMap");
var $map=$("#mapholder");
      $btn.click(function(){
          if($map.is(":visible")){
              $map.hide();
              $btn.val("show map");
          }else{
              $map.show();
              $btn.val("hide map");
          }
      })
  });
</script>