显示隐藏可以做到同一个按钮吗?

郑爽
  • 57
<!DOCTYPE html><html><head>
<script type="text/javascript">$(document).ready(function(){  $("#hide").click(function(){  $("p").hide(1000);  }); 
 $("#show").click(function(){  $("p").show(1000);  });});</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮,我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>

能不能只要一个按钮,默认一打开是隐藏的。
点一下按钮,显示,再点一下就隐藏。

回复
阅读 391
3 个回答

可以使用jquery的toggle函数

<!DOCTYPE html><html><head>
<script type="text/javascript">$(document).ready(function(){  $("#toggle").click(function(){  $("p").toggle(1000);  });
</head>
<body>
<p id="p1">如果点击“隐藏”按钮,我就会消失。</p>
<button id="toggle" type="button">隐藏</button>
</body>
</html>
<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript">
    $(document).ready(function () {
      var isHide = true
      function render() {
        $("p")[isHide ? 'show' : 'hide'](1000)
        $("btn").text(isHide ? "隐藏" : "显示")
        isHide = !isHide
      }
      $("#btn").click(render)
      render()
    });
  </script>
</head>

<body>
  <p id="p">如果点击“隐藏”按钮,我就会消失。</p>
  <button id="btn" type="button"></button>
</body>

</html>
你知道吗?

宣传栏