Question

我有一个网站（lowrateadvisor.com）我正在努力让页面顶部的可扩展div工作。我可以在jsfiddle.net/3shEE/95/上工作，只是不在网站上。非常感谢任何帮助。

CSS
#expandable a{
color:#fff;
text-decoration:underline;
}
#expandable a:hover{
color:#fff;
text-decoration:none;
}
#expandable {
    width: 100%; 
    height:35px;
    background: transparent;
    overflow: hidden;
background:#000;
color:#fff;
font-size:11px;
text-align:center;
}

#expandable.dropped { 
    background: #666; 
    color: white; 
    border-bottom: 1px solid #111 }

#expandable span {
    display: block;
    width: 100%; height: 50px;
    line-height: 50px; text-align: center;
    cursor: pointer;
}
#expandable ul {
    width: 100%;
}

HTML

<div id="expandable">
    <span> Get the lowest possible rates on pre approved home loans, mortgages and refinancing your home.</span>

    <ul>
        <li>We will never...<br /></li>
        <li>&raquo; Ask for your SSN.</li>
        <li>&raquo; Ask for a credit card.</li>
        <li>&raquo; Store your information.</li>
        <li>&raquo; Hassle or Pressure any applicant.</li>
        <li> <a href="http://lowrateadvisor.com/apply-now/">Get Pre Approved</a> | <a href="http://lowrateadvisor.com/get-pre-approved/">Get A Quote</a></li>
    </ul>

</div>

JQUERY

$("#expandable").hover(function() {
    $(this).stop().animate({"height":"200px"},1000).addClass("dropped");
}, function() {
    $(this).stop().animate({"height":"35px"},1000).removeClass("dropped");
});

Answer 1

看不到任何拼写错误....只是一个SyntaxError：第67行的非法字符尝试使用jquery 1.8.2和它：

<script type="text/javascript">
$(document).ready(function () {
    $("#expandable").hover(function() {
        $(this).stop().animate({"height":"200px"},1000).addClass("dropped");
    }, function() {
        $(this).stop().animate({"height":"35px"},1000).removeClass("dropped");
    });
});
</script>

Answer 2

有时从JSFiddle复制代码时会发生这种情况。

您的jQuery代码的最后一个分号（有时是最后一个）被复制为非法字符。尝试删除最后一行});并手动重新输入。

使用Jquery的可扩展Div

2 个答案: