0

我有简单的隐藏和显示功能，但它不起作用。任何帮助，将不胜感激

<head>
<script type="text/javascript">
$(function(){
$('a').click(function(){
var visible= false;         
if(visible){
$('div').hide('slow')           
}

else {
$('div').show('slow')           
}
visible=!visible;
})
})
</script>
</head>
<body>
<div style="background:#F00; width:500px; height:50px"></div>
<a href="#">hide</a>
<div class="append"></div>
</body>
4

4 回答 4

4

在事件处理程序visible 之外声明和初始化：

var visible= false;  
$('a').click(function(){
   if(visible){
       $('div').hide('slow')           
   }
   else {
       $('div').show('slow')           
   }
   visible=!visible;
});

否则，您每次执行事件处理程序时都会进行初始化，所以visible永远不会是真的。false if(visible)

但是，您也可以使用.toggle [docs]来避免使用额外的状态变量：

$('a').click(function(){
    $('div').toggle();         
});
于 2012-08-22T12:30:03.283 回答
1

jQuery 有一个内置的隐藏/显示方法：.toggle()。它在隐藏时显示您的元素，反之亦然。

于 2012-08-22T12:30:29.790 回答
0

问题是这些行：

var visible= false;         
if(visible){
    $('div').hide('slow')           
}

visible在这种情况下将始终为假，因此您的 div 永远不会被隐藏。

于 2012-08-22T12:29:51.623 回答
0

尝试toggle改用。在此处查看第二个示例：

http://api.jquery.com/toggle/

这是示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    p { background:#dad;
        font-weight:bold;
        font-size:16px;
    }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Toggle 'em</button>

  <p>Hiya</p>
  <p>Such interesting text, eh?</p>
  <script>
    $("button").click(function () {
      $("p").toggle("slow");
    });    
  </script>

</body>
</html>
于 2012-08-22T12:31:47.807 回答