單擊div時滑出

我正在創建一個網站，我希望它只是一個索引頁。當你登陸時，會出現幾行like this，當你點擊一行時，它會將隱藏在底部的信息展開爲like this。單擊div時滑出

現在我搜索了四周，我發現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"}); 
    } 
});

然而，它似乎並沒有工作。我錯過了什麼？

來源

2016-02-01 Hello Mellow

添加jQuery代碼在 –

呃，你可能要一個和元素添加到您的HTML，你似乎有評論在幻燈片中輸出var clicked = true。js –

哦，等等......你只是把整個東西轉儲到index.html或什麼東西？ –

var clicked=true;

已被註釋掉。取消註釋。

希望這會有所幫助。

來源

2016-02-01 08:30:53

在我的實際文件中，我確實沒有註釋它，當我複製並粘貼時，我只是搞砸了 –

我認爲你正在尋找這樣的事情

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

來源

2016-02-01 08:57:55

我不知道怎麼是你的標記，因爲在你前面的回答你對此有何評論你寫

我搞砸的時候副本並粘貼

這裏是包括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,& head標記。也請更新你指的是從外部file.Currently CSS和JS我已經提到CSS和JS來自同一頁面

WORKING DEMO

來源

2016-02-01 09:02:05 brk

變化

<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> 並嵌入代碼in $(document).ready(function() { }); and Uncomment 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; 
}*/

來源

2016-02-01 10:15:54 Shashikala

單擊div時滑出

回答

相關問題