滑动面板 - jQuery

时间:2015-07-05 04:52:57

标签: javascript jquery

我是jQuery的新手,我正在试验一个'面板',假设在点击时滑动,虽然我无法理解为什么“面板”在点击时不会滑动。任何人都可以开明这个话题吗?我也对我的代码提出任何其他建议。

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Slide Panel</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
</head>
<body>
    <div class="panel">
    <br />
    <br />
    <p>Now you see me!</p>
    </div>
    <p class="slide"><div class="pull-me">Slide Up/Down</div></p>
</body>
</html>

JS(编辑,修复):

$(document).ready(function() {
$('.pull-me').click(function() {
    $('.panel').slideToggle('slow');
    });
})

正确解决方案:http://jsfiddle.net/3kt10v3b/

JSFiddle:http://jsfiddle.net/3kt10v3b/

1 个答案:

答案 0 :(得分:1)

万一有人碰到这个,这是正确的代码:

HTML:

from

JS:

<!DOCTYPE html>
<html>
    <head>
        <title>Slide Panel</title>            
        <link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
    </head>
    <body>
        <div class="panel">
            <br/><br/>
            <p>Now you see me!</p>
        </div>

        <p class="slide"><div class="pull-me">Slide Up/Down</div></p>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

Fiddle

上的解决方案

感谢@Jonathan Michalik的评论