展開/摺疊Div

Question

我正在嘗試創建兩個按鈕，一個會擴展div，另一個會將其摺疊。我試圖修改這段代碼，但我似乎無法讓它工作。我想我只是不明白如何不切換鏈接。

我也試圖讓頁面加載時出現DIV。我甚至不確定這是否可以用我寫代碼的方式。

任何人都可以幫助我瞭解我需要做些什麼才能使其發揮作用。

http://jsfiddle.net/XUjAH/93/

我試圖避免使用.slideUp/.slideDown它似乎與我使用的頁面上的其他插件來干擾。

$('#click-meopen').click(function() { 
    var height = $("#this").height(); 
    if(height > 0) { 
     $('#this').css('height','0'); 
    } else { 
     $("#this").css({'position':'absolute','visibility':'hidden','height':'auto'}); 
     var newHeight = $("#this").height(); 
     $("#this").css({'position':'static','visibility':'visible','height':'0'}); 
     $('#this').css('height',newHeight + 'px'); 
    } 
}); 

$('#click-meclose').click(function() { 
    var height = $("#this").height(); 
    if(height > 0) { 
     $('#this').css('height','0'); 
    } else { 
     $("#this").css({'position':'absolute','visibility':'hidden','height':'auto'}); 
     var newHeight = $("#this").height(); 
     $("#this").css({'position':'static','visibility':'visible','height':'0'}); 
     $('#this').css('height',newHeight + 'px'); 
    } 
}); 

Answer 1

如果你可以使用toggle那麼所有你需要的是$("#this").toggle('slow');，但你必須用display: none;

Answer 2

您正試圖改變這按鈕取代height: 0;？

<input type="submit" id="click-meopen" value="open"></input> 
<input type="submit" id="click-meclose" value="close"></input> 
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div> 

這並不難。

我也建議你使用jQuery的.toggle()或​​方法。只需將css height屬性設置爲零不是一種好的做法。

您是否想要在加載頁面或加載完成時顯示div（DOM已準備就緒）？

你的JavaScript代碼是：

$('#click-meopen').click(function() { 
    $('#this').show(); // or .toggle() 
}); 

$('#click-meclose').click(function() { 
    $('#this').hide(); // or .toggle() 
});​ 

如果你會使用你應該使用.toggle()方法只有一個按鈕，否則與​​方法棒！

當DOM就緒（頁面完全加載）：所使用的方法

$(document).ready(function(){ 
    $('#this').show(); 
}); 

文檔：

• http://api.jquery.com/show/
• ​​
• http://api.jquery.com/toggle-event/
• http://api.jquery.com/ready/

Answer 3

$('#click-meopen').click(function() { 
    $('#this').show(); 
}); 

$('#click-meclose').click(function() { 
    $('#this').hide(); 
});​ 

http://jsfiddle.net/XUjAH/95/

或用撥動

$('#click-meopen').click(function() { 
    $('#this').toggle(); 
}); 

http://jsfiddle.net/XUjAH/96/

Answer 4

我看到你已經使用-webkit-transition這鉻對我的作品，但我猜你想要的工作在其他瀏覽器比webkit。

有兩種方法我可以建議，一種是隻需簡單地將-moz-transition: height 1s ease-in-out;和transition: height 1s ease-in-out;添加到css3中，但在較老的ie瀏覽器中無法幫助。

的另一種方法是將一個div在div文本里面要崩潰：

<div id="this"> 
    <div id="height"> 
     text 
     text 
    </div> 
</div> 

然後在你的JavaScript就可以得到內部的div元素的高度，並以這種方式您可以使用動畫而不是高度：自動。

$('#click-meopen').click(function() { 
    $('#this').animate({'height': $('#height').height()}, 1000); 
}); 

$('#click-meclose').click(function() { 
    $('#this').animate({'height': 0}, 1000); 
}); 

這應該足夠了你。

Answer 5

以下所有文本只是恕我直言:)

見我exmple在這裏 - http://jsfiddle.net/XUjAH/99/

HTML：

<p id="click-meopen">click me to open</p> 
<p id="click-meclose">click me to close</p> 
<div id="this"> 
    <div id="content">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div> 
</div> 

爲JS：

$('#click-meopen').click(function() { 
    $("#this").height($("#content").height()); 

}); 
$('#click-meopen').click(); 

$('#click-meclose').click(function() { 
    $("#this").height('0'); 
});​ 

至於CSS，它應該是一樣的，你有。

UPD：似乎動畫有點片狀 - 當你設置'height：auto' - div從開頭就可見，但關閉按鈕忽略第一次點擊動畫（我有最新更新的Chrome），所以我已經添加了一些解決方法。還爲Firefox和Opera等其他瀏覽器支持此動畫，並且不僅支持-webkit的用戶，還添加了其他樣式。

http://jsfiddle.net/XUjAH/110/

在CSS中添加類

，並移除了主格調 '過渡'：

.with-animation { 
    -webkit-transition: height 1s ease-in-out; 
    -moz-transition: height 1s ease-in-out; 
    -o-transition: height 1s ease-in-out; 
    transition: height 1s ease-in-out; 
} 

在JS： //但是我們的DIV已經有了合適的尺寸這條線 //防止瞬時關閉第一次點擊，不知道爲什麼 $（「＃container」）。height（$（「＃content」）。height（））;

$('#click-meopen').click(function() { 
    $("#container").height($("#content").height()); 
}); 

$('#click-meclose').click(function() { 
    // If we add class with-animation on upper level div will 
    // start animation on page load 
    $("#container").height('0').addClass("with-animation"); 
}); 

Answer 6

$('#click-meopen').click(function() { 
     $("#this").css({'position':'absolute','visibility':'hidden','height':'auto'}); 
     var newHeight = $("#this").height(); 
     $("#this").css({'position':'static','visibility':'visible','height':'0'}); 
     $('#this').css('height',newHeight + 'px'); 
    }); 

    $('#click-meclose').click(function() { 
     $('#this').css('height','0'); 
    }); 

    $('#click-meopen').click(); 

http://jsfiddle.net/XUjAH/100/