Question

我的网站上有一个简单的jquery代码，用于下滑面板。我在标题中包含了jquery.js文件。但它仍然无法奏效。它与版本有关吗？

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Slide Panel</title>
        <script type="text/javascript" src="script.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css"></link>
    </head>

    <body>
        <div class="panel">
            <br />
            <br />
            <p>Panel</p>
        </div>

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

CSS：

body {
    margin:0 auto;
    padding:0;
    width:200px;
    text-align:center;
}
.pull-me{
    -webkit-box-shadow: 0 0 8px #FFD700;
    -moz-box-shadow: 0 0 8px #FFD700;
    box-shadow: 0 0 8px #FFD700;
    cursor:pointer;
}
.panel {
    background: #ffffbd;
    background-size:90% 90%;
    height:300px;
    display:none;
    font-family:garamond,times-new-roman,serif;
}
.panel p{
    text-align:center;
}
.slide {
    margin:0;
    padding:0;
    border-top:solid 2px #cc0000;
}
.pull-me {
    display:block;
    position:relative;
    right:-25px;
    width:150px;
    height:20px;
    font-family:arial,sans-serif;
    font-size:14px;
    color:#ffffff;
    background:#cc0000;
    text-decoration:none;
    -moz-border-bottom-left-radius:5px;
    -moz-border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}
.pull-me p {
    text-align:center;
}

和jQuery：

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

提前致谢！：）

Answer 1

<!DOCTYPE html>
  <html>
  <head>
    <title>Slide Panel</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> <!-- Always first call the jQuery library -->
    <script src="script.js"></script> <!-- Then call your custom scripts -->

    <link rel="stylesheet" href="style.css">  <!-- Link tag is selfclosing don't put </link> at the end -->
  </head>

  <body>
    <div class="panel">
        <br />
        <br />
        <p>Panel</p>
    </div>

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

简单的jquery slideToggle在任何浏览器中都不起作用

1 个答案: