2011-09-26 252 views
0

我是jquery的新手,我想隱藏div css: display:none,一旦點擊了按鈕,$(..).slideDown將執行,div將顯示其內容。我試過這個。如何顯示div隱藏在CSS按鈕點擊

<style> .hidden-div{ display:none } </style> 

<div class="hidden-div"> You can't see me </div> 

<button onclick="show-div()"> Show Above Div </button> 


<script> 

    function show-div(){ 

     $('.hidden-div').slideDown('fast'); 
     // more stuff... 
    } 
</script> 

這不真的把它向下滑動,因爲它與其他所有東西重疊?另外我試着將class="hidden-div"設置爲class="display-div",但不能執行slideDown動畫。

現在我可以說$('hidden-div').hide()只是在div後面,並完全刪除css,但它創造了這個問題,我看到的div,然後它隱藏起來,它只有0.5秒的事情在頁面加載開始,但它看起來不好。

因此,任何人都知道一個解決方案?


發現我自己的問題的解決方案..

//rehide the div, not sure why, but it works. 
$('.hidden-div').hide(); 


//change class so it no longer display:none 
//but it will not show the div as .hide() was execute above. 
$('.hidden-div').attr('class','showing-div'); 


//Slide it down and everything works. 
$('.hidden-div').slideDown('fast'); 



//this can be done in 1 liner. (thank you, Mohsen for chaining explanation) 
$('.hidden-div').hide().attr('class','showing-div').slideDown('fast'); 

希望這是對別人有幫助的。

+0

Markdown是*不是* BBcode。 – alex

+0

Stackoverflow有一個功能來回答你自己的問題。 –

回答

1

,最好使用標準的JavaScript,並指向該div id爲

通過jQuery
<style> .hidden-div{ display:none } </style> 

<div class="hidden-div" id="hidden-div"> You can't see me </div> 

<button onclick="getElementById('hidden-div').style.display = 'block'"> Show Above Div </button> 
+0

那就好,但我想動畫的JQuery.slideDown(); – Kivylius

0
$('.hidden-div').show('fast'); 

嘗試使用<和>而不是[和],並正確格式化所有內容?

+0

不知道如果你甚至讀我的問題,沒有.show是不工作。 – Kivylius

0

在你的javascript中,首先使用jQuery函數removeClass()去除類'hidden-div'。 看看是否有幫助?

+0

如果我刪除類div div將顯示,但.slideDown()的動畫丟失,因爲該div是公開的。 – Kivylius

0
  1. 綁定事件,不使用內嵌的JavaScript方法
  2. jQuery SlideDown方法不適用於刪除元素。你可以使用hidefadeOut
  3. 順便說一句,如果你想有一個向下滑動的效果,然後隱藏你可以鏈接兩個方法的元素。
  4. 爲了防止重疊,你需要使用CSS。您可以使用position:absolute或給元素的父級提供某個height

兼得滑下和淡化效果,並結合使用非內嵌代碼,你可以使用此代碼的事件:

$('button').bind('click', function(){ 
$('.hidden-div').slideDown(500).fadeOut(1000); //500ms slide down and 1s fade out 
}) 

太刪除disply:nonehidden-div類。

+0

show-div不是唯一的函數,我也有load-div和hide-div函數,所以我不能使用綁定事件,因爲它不會工作。另外關於鏈接效果try'd'$('。hidden-div')。attr('class','show-div')。slideDown('fast');'但動畫仍然丟失。 – Kivylius

相關問題