Question

我正在建立一个网站，我希望它只是一个索引页面。当你降落时，会有几行like this，当你点击一行时，它会将隐藏的信息展开到底部，使其显示为like this。

现在我四处寻找并找到了this，我基本上将这个东西复制并粘贴到一个新文件上，只是为了愚弄它，但它没有用。我添加了html标签，重要的是正确的文件等，我的代码看起来就像这样。

//Index
<!DOCTYPE html>
<html>

    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <link href="main.css" rel="stylesheet">
    <script type="slide.js"></script>   

<div class="container">
    <div class="one">Click me to reveal new div</div>
    <div class="two">Hey it worked!
        <br>New Contenttt</div>
</div>
</html>

//main.css
 .container {
    overflow:hidden;
    height: 60px;
}
.one {
    position: relative;
    top: 0;
    background-color: #FFC300;
    z-index: 1;
    cursor:pointer;
}
.two {
    position: relative;
    top: -40px;
    background-color: yellow;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
}
/*.one:hover + .two {
    top: 0px;
}*/

//slide.jsvar clicked=true;
$(".one").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".two").css({"top": 0});
    }
    else
    {
        clicked=true;
        $(".two").css({"top": "-40px"});
    }
});

但它似乎无法奏效。我错过了什么？

Answer 1

var clicked=true;

被注释掉了。取消注释。

希望这有帮助。

Answer 2

我认为你正在寻找像这样的东西

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function (event) {
                $(".one").on('click', function(){
                    $(".two").slideToggle('fast')
                });
            });
        </script>

        <style>
             .container {
                overflow:hidden;
                height: 60px;
            }
            .one {
                background-color: #FFC300;          
                cursor:pointer;
            }
            .two {
                display:none; /* delete this line if you want to show your yellow div by default*/
                background-color: yellow;           
            }
    </style>
    </head>

    <div class="container">
        <div class="one">Click me to reveal new div</div>
        <div class="two">Hey it worked!
        <br>New Contenttt</div>
    </div>
</html>

Answer 3

我不确定你的标记是怎样的，因为在你之前的回答中你评论你写了

我在复制和粘贴时搞砸了

这是完整的标记，包括JS和CSS

<!DOCTYPE html>
 <html>
  <head>
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <style>

 .container {
    overflow:hidden;
    height: 60px;
}
.one {
    position: relative;
    top: 0;
    background-color: #FFC300;
    z-index: 1;
    cursor:pointer;
}
.two {
    position: relative;
    top: -40px;
    background-color: yellow;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
}

 </style>

 </head>
 <body>
    <div class="container">
    <div class="one">Click me to reveal new div</div>
    <div class="two">Hey it worked!
        <br>New Contenttt</div>
</div>
 <script>

       var clicked=true;
       $(".one").on('click', function(){
    if(clicked)
      {
        clicked=false;
        $(".two").css({"top": 0});
    }
    else
    {
        clicked=true;
        $(".two").css({"top": "-40px"});
    }
});
   </script>
  </body>
</html>

注意：我添加了body，＆amp; head标记。还请更新你从外部文件中引用css和js。目前我从同一页面引用了CSS和JS

WORKING DEMO

Answer 4

更改

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> to <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> in index.html

和<script type="slide.js"></script>到<script src="slide.js"></script> 并将您的代码嵌入$(document).ready( function () { }); 并取消注释var clicked=true;

最终代码将是

的index.html

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="slide.js"></script>
    <link href="main.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="one">Click me to reveal new div</div>
        <div class="two">Hey it worked!
            <br>New Contenttt</div>
    </div>
</body>

slide.js

$(document).ready(function() {
var clicked = true;
$(".one").on('click', function() {
    if (clicked)
    {
        clicked = false;
        $(".two").css({"top": 0});
    }
    else
    {
        clicked = true;
        $(".two").css({"top": "-40px"});
    }
});

}）;

的main.css

.container {
overflow:hidden;
height: 60px;
}
.one {
position: relative;
top: 0;
background-color: #FFC300;
z-index: 1;
cursor:pointer;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
/*.one:hover + .two {
top: 0px;
}*/

单击div时滑出

4 个答案: