Question

我有简单的隐藏和显示功能，但它无法正常工作。任何帮助将不胜感激

<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>

Answer 1

在事件处理程序之外声明并初始化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(); });

Answer 2

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

Answer 3

问题是这些问题：

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

visible在这种情况下总是假的，因此你的div永远不会被隐藏。

Answer 4

请尝试使用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>

隐藏功能无效

4 个答案: