onClick切換和切換div元素的可見性

在這裏我想創建一個下拉窗體與點擊元素的過渡效果，onClick它會觸發轉換，但是當我再次點擊它不會觸發轉換，而是它只是隱藏div元件.... 演示：http://tryitnow.net16.net/onClick切換和切換div元素的可見性

下面參見：

功能：

<script> 

$(function() { 

    $("#login").click(function() { 
     var visi= $(".User-Login").css('visibility'); 

     if(visi=="visible") { 
      $(".User-Login").toggleClass("box-colap"); 
      $(".User-Login").css('visibility','hidden');  
     } 
     else { 
      $(".User-Login").css('visibility','visible'); 
      $(".User-Login").toggleClass("box-change"); 
     }  
    }); 
});

HTML：

<table class="MainMenu" style="width:100%;background-color:white" align="center"> 
<a href="#">Home</a> 
     &nbsp; 
     &nbsp; 
     </td> 
     <td> 
     <a href="#">How It Works </a> 
     </td> 
     <td> 
     <a href="#"> Features</a> 
     </td> 
     <td> 
     <a href="#"> Why Us </a> 
     </td> 
     <td> 
     <a href="#"> Sign Up </a> 
     </td> 
     <td> 
     <a id="login" href="javascript:void(0);"> Login </a> 
     </td> 
</table>

CSS：從CSS3你

.User-Login { 

visibility:hidden; 
position:absolute; 
left:1150px;  


background:black; 
-webkit-transition: height 2s ease; 
-moz-transition: height 2s ease; 
-o-transition: height 2s ease; 
-ms-transition: height 2s ease; 
transition:, height 2s ease; 
overflow:hidden; 


height:10px; 

top:90px; 

} 

.box-change { 
height: 250px; 
} 

.box-colap { 
height:10px; 
}

來源

2013-09-27 user2824642

兩個簡單的解決方案，甚至不需要jQuery的

fiddle 1

fiddle 2

兩者都使用CSS3

這裏的實際的CSS代碼fo [R滑動

div{ 
display:block; 
height:120px; 
width:120px; 
background:red; 
} 

.hideUp{ 
    position:relative; 
    height:200px; 
    width:200px; 
    background:blue; 
    display:block; 
    -webkit-transition:all 1s ease; 
    -moz-transition:all 1s ease; 
} 

.hideUp:focus{ 
    top:-200px; 
}

和HTML

<a href="#" tabindex="-1" class="hideUp"><div><p>CLICK TO MOVE</p></div></a>

來源

2013-09-27 19:31:22 Anobik

onClick切換和切換div元素的可見性

回答

相關問題