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）從一開始就隱藏。您可以設置課程，但是您可以在開始時隱藏它。

祝你好運！