Question

我有一个奇怪的问题。首先，我将slideup（）函数放入我的网站，但它不起作用。我已经尝试了很多让它工作无济于事。我甚至尝试将示例代码复制并粘贴到一个新的html文件中，这甚至都不起作用。有任何想法吗？我总是可以让click（）事件做一些事情，但是slideup（）似乎永远不会起作用。开始让我有点疯狂！

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideUp demo</title>
<style>
div {
background: #3d9a44;
margin: 3px;
width: 80px;
height: 40px;
float: left;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
$( document.body ).click(function() {
if ( $( "div:first" ).is( ":hidden" ) ) {
$( "div" ).show( "slow" );
} else {
$( "div" ).slideUp();
}
});
</script>
</body>
</html>

Answer 1

使用课程可以提高清晰度，并为您提供更多样式的功能。

例如，像 -

if ( $( "div:first" ).hasClass( "visible" ) ) {

  $( "div" ).slideUp().removeClass("visible");

} else {

  $( "div" ).show( "slow" ).addClass("visible");
}

您也可以尝试slideToggle()来完成这类工作 -

$( document.body ).click(function() {

  $( "div" ).slideToggle();

});

使用SlideToggle进行演示 - http://jsfiddle.net/e7t7F/

更新，评论，整页示例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>Slide Toggle</title>
    <style>
        div { background-color:orange; 
                  display:block; 
                  width:5em; 
                  height:5em; 
                  margin:.5em 
                 }
             /* just example style */
    </style>
</head>
<body>

  <div>ONE</div>
  <div>TWO</div>
  <div>THREE</div>
  <div>FOUR</div>
  <div>FIVE</div>
  <div>SIX</div>

  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
    $(document).click(function() {
     $( "div" ).slideToggle();
    });
  </script>
</body>
</html>

无论我做什么，jquery slideup都无法正常工作

1 个答案: