Jquery Slide切换

Question

基本上我试图实现的是一个滑动切换效果，但不完全。

例如，我有一个设置为200px的高度的div和一个嵌套img标签的锚点。当用户点击图片时，div将展开到500px的高度，并显示在ul内的嵌套内容。

要关闭div，右下角有一个关闭图标，它是一个包含背景图像的锚点。点击时，div会滑回到先前的200px高度。

所有建议，欢迎

这里是我的HTML帮助：

感谢，

的Jordy

Answer 1

使用jQuery：

var $getStarted = $('#getstarted'); 
$('#open img').click(function(){ 
    if($getStarted.hasClass('opened')) { 
    $('#close').trigger('click'); 
    } else { 
    $getStarted.animate({height:'+=300px'},500,function(){ 
     // you're open 
     $getStarted.addClass('opened'); 
    }); 
    } 
    return false; 
}); 
$('#close').click(function(){ 
    if($getStarted.hasClass('opened')) { 
    $getStarted.animate({height:'-=300px'},500,function() { 
     // you're closed again 
     $getStarted.removeClass('opened'); 
    }); 
    } 
    return false; 
}); 

这个怎么样？

实施例这里：http://jsfiddle.net/huF73/

谢谢， MyStream

Answer 2

肘节（）; 或者，如果你想让它有点短：

function toggle(elm) 
{ 
    var height = document.getElementById(elm); 
    if(height == 200) { 
     elem.style.height = 500; 
    } 

    if(height == 500) { 
     elem.style.height = 200; 
    } 
    return false; 
} 

您可以通过<的onclick =“切换（‘yourElementToToggle’）”一>标签

希望它可以帮助

Answer 3

使用此功能

试试这个： jQuery的：

$(document).ready(function() { 
    $("div.panel_button").click(function(){ 
     $("div#panel").animate({ 
      height: "100%" 
     }) 
       $("div#main").hide(); 



    }); 

    $("div#hide_button").click(function(){ 
     $("div#panel").animate({ 
      height: "0px" 
     }, "fast"); 
       $("div#content").show(); 


    }); 

}); 

BTW，针对上述情况，可以高度的值更改为期望值。

CSS：

.panel_button1 a { 
YOUR STYLING HERE } /* for the exit button */ 

.panel_button { 
width: YOUR VALUE HERE; 
position: relative; } /* for the activation button styling */ 

.panel_button a { 
YOUR STYLING HERE } 
/* for the activation button styling */ 

#panel { 
position: fixed; 
width: VALUE OF YOUR CHOICE; 
height: 0%; /*THIS CANNOT CHANGE UNLESS YOU WANT IT TO START AT A SPECIFIC HEIGHT. IF YOU WANT IT HIDDEN, DO NOT CHANGE IT*/ 
overflow: hidden; 
z-index: 25; 
background-color: COLOUR OF YOUR CHOICE; 
} /* drop down colour */ 

#panel_contents { 
height: VALUE OF YOUR CHOICE; 
width: VALUE OF YOUR CHOICE; 
position: absolute; 
    z-index: 999; } /* drop down text */ 

#content { 
CONTENT STUFF HERE } 

应用：

Activation: <br> <div class="panel_button" style="display: visible;"><a href="#panel">blahblahblah</a></div> 

内容&退出按钮：

<div id="panel"> 
<div class="panel_button1" id="hide_button" style="display: visible;"><a href="#">EXIT BUTTON TEXT OR STUFF.</a></div> 
    <div id="panel_contents"> 
WHAT YOU SEE WHEN THIS THING DROPS DOWN. LIKE TEXT STUFF. 
</p> 
</div> 
</div></div> 

Answer 4

以下是我在常见问题解答中使用的一些代码，但其工作方式与您所描述的完全相同。

的jQuery：

<script type="text/javascript"> 
    function ToggleFAQ(faq) { 
     $("#faq" + faq).slideToggle(500); 
    } 
</script> 

HTML：

<a href="javascript:void(0)" onclick="ToggleFAQ('1')">QUESTION HERE</a> 
<div id="faq1"> 
    <p> 
     ANSWER HERE 
    </p> 
    <p> 
     <a href="javascript:void(0)" onclick="ToggleFAQ('1')">- Hide</a> 
    </p> 
</div> 

的DIV持有的答案（FAQ1）从一开始就隐藏。您可以设置课程，但是您可以在开始时隐藏它。

祝你好运！