单击div时滑出

Question

I'm making a website and I want it to be just one index page. 我正在建立一个网站，但我希望它只是一个索引页面。 And when you land, there will be a couple rows like this and when you click a row, it will expand the information that's been hiding to the bottom so it looks like this . 当您着陆时，将有几行像这样，当您单击一行时，它将把一直隐藏的信息扩展到底部，因此看起来像这样。

Now I searched around and I found this and I essentially copied and pasted the thing onto a new file just to fool around with it but it didn't work. 现在，我搜索了一下，发现了这一点，我基本上将其复制并粘贴到了一个新文件中，以至于无所事事，但是它没有用。 I added the html tags, and important the proper files and such, well my code looks like 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"});
    }
});

However it doesn't seem to work. 但是，它似乎不起作用。 What am I missing? 我想念什么？

Answer 1

var clicked=true;

is commented out. 已被注释掉。 Uncomment this. 取消注释。

Hope this helps. 希望这可以帮助。

Answer 2

I think you are looking for something like this 我想你正在寻找这样的东西

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

I am not sure how is your markup since in your previous answer you comment you have written 我不确定您的标记如何，因为在上一个答案中您已经写了评论

I just messed up when copy and pasting 复制和粘贴时我搞砸了

Here is the complete mark up including JS and CSS 这是完整的标记，包括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>

NOTE: I include the body , & head tag. 注意：我包括body和＆ head标签。 Also please update are you referring the css and js from external file.Currently I have referring CSS and JS from same page 还请更新您是否从外部文件引用CSS和JS。当前我从同一页面引用CSS和JS

WORKING DEMO 工作演示

Answer 4

Change 更改

<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

and <script type="slide.js"></script> to <script src="slide.js"></script> and embed your code in $(document).ready( function () { }); 和<script type="slide.js"></script>到<script src="slide.js"></script>并将您的代码嵌入$(document).ready( function () { }); and Uncomment var clicked=true; 和Uncomment var clicked=true;

Final code will be 最终代码将是

index.html 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 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 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 个解决方案

解决方案1
0 2016-02-01 08:30:53

解决方案2
0 2016-02-01 08:57:55

解决方案3
0 2016-02-01 09:02:05

解决方案4
0 2016-02-01 10:15:54

单击div时滑出

问题描述

4 个解决方案

解决方案1 0 2016-02-01 08:30:53

解决方案2 0 2016-02-01 08:57:55

解决方案3 0 2016-02-01 09:02:05

解决方案4 0 2016-02-01 10:15:54

解决方案1
0 2016-02-01 08:30:53

解决方案2
0 2016-02-01 08:57:55

解决方案3
0 2016-02-01 09:02:05

解决方案4
0 2016-02-01 10:15:54