2014-03-28 130 views
2

在這個JS小提琴,效果基本show()和了slideDown()不工作,但的slideToggle()不

http://jsfiddle.net/bGKLn/

我想滑 「內容」 上下車時 「底」 盤旋。我無法實現它,請幫助我。

我試過slideToggle()和它的工作,但沒有好奇心..爲什麼不工作?

HTML 

<div id="content">Content</div> 
<div id="bottom" onclick="togle()"></div> 

CSS

#content { 
width: 400px; 
border-left: 10px solid #FA802F; 
border-right: 10px solid #FA802F; 
text-align: center; 
padding: 100px 0px 100px 0px; 
display: none; 
} 
#bottom { 
width: 420px; 
height: 100px; 
background-color: #FA602F; 
border-bottom-left-radius: 100px; 
border-bottom-right-radius: 100px; 
} 

Java腳本的

function togle() { 
var x = document.getElementById("content"); 

if (x.style.display.value.match("none")) { 
    $("#content").slideDown("slow"); 
} else { 
    $("#content").slideUp("slow"); 
} 
} 
+0

你有和你的代碼中的錯誤,屬性值不存在 – Jorge

回答

2

更換

x.style.display.value.match("none") 

的東西,如

x.style.display != "block" 

x.style.display返回一個字符串,它沒有value財產,你會得到

function togle() { 
    var x = document.getElementById("content"); 

    if (x.style.display != "block") { 
     $("#content").slideDown("slow"); 
    } else { 
     $("#content").slideUp("slow"); 
    } 
} 

FIDDLE

或更多一點jQuery'ish

$('#content').is(':visible') 

FIDDLE

或更多jQuery'ish,只需使用slideToggle()

+0

這很快,謝謝你,這解決了我的問題。 – Rishi

+0

順便說一下.src返回的是什麼,我的意思是它有一個.value屬性? – Rishi

+0

不,沒有任何元素屬性具有'value'屬性,但值是屬性本身,如在'element.value'中,但沒有'element.src.value',它只是'element.src' – adeneo

相關問題