Question

在这个JS小提琴中，

我希望在“底部”悬停时上下滑动“内容”。我无法让它工作，请帮助我。

我尝试过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");
}
}

Answer 1

替换

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()？

slideUp（）和slideDown（）不起作用，但slideToggle（）可以

1 个答案: