0

你好我第一次来这里

我有一个基本的 jQuery slideToggle，但它不起作用。任何解决方案？

感谢您阅读本文。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style/style.css">
        <script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $("#ucp").click(function(){
                $("#test").slideToggle("slow");
            });
        });
        </script>
    </head>
    <body>
        <div class="header">
            <a href="http://www.kevinheisen.nl" target="_blank"><img src="style/lacp.png" alt="acp logo"></a>
            <div class="nav">
                <ul>
                    <li><a href="#">Afmelden</a></li>
                    <li><a href="http://www.kevinheisen.nl">Vraag hulp</a></li>
                    <li><a href="#">preview website</a></li>
                    <li><a href="#">ACP startpagina</a></li>
                </ul>
            </div>
        </div>
        <div id="ucp">Gebruikers beheer</div>
        <div id="test">hallo hallo hallo hallo</div>
        <div class="project">Projecten<br /><span id="menu">Klik hier om groter te maken</span></div>
        <div class="updates">Updates<br /><span id="menu">Klik hier om groter te maken</span></div>
        <div class="homecontent">Home content<br /><span id="menu">Klik hier om groter te maken</span></div>
        <div class="portofolio">portfolio<br /><span id="menu">Klik hier om groter te maken</span></div>
        <div class="about">Over mij<br /><span id="menu">Klik hier om groter te maken</span></div>
    </body>
</html>

好的，这是我所有的代码。我知道我可以减少 CSS。

@font-face {
    font-family: 'Acptitle';
    src:url('/admin/style/CGFLocustResistance.ttf'), 
    url('/admin/style/CGFLocustResistance.eot'); /* IE9 */
}

@font-face {
    font-family: 'Acpdefault';
    src:url('/admin/style/ccaps.ttf'),
    url('/admin/style/ccaps.eot'); /* IE9 */
}

body {
    margin: 0px 0px 0px 0px;
    padding: 0;
    background: #585858;
    background-image: url('/style/lacp.png');
}

#menu {
    font-size: 8px;
}

.header {
    height: 180px;
    min-width: 960px;
    width: 100%;
    background: #3A3A3A;
}

img {
    display: block;
    margin: 0 auto;
    text-align: center;
}

.header > .nav > ul {
    list-style-type: none;
}

.header > .nav > ul > li {
    font-family: 'Acptitle';
    text-align: center;
}

.header > .nav > ul > li > a:link, a:visited{
    font-size: 12px;
    box-shadow: inset 0 0 20px #000000; 
    margin: 0 10px;
    float: right;
    display: block;
    background: #3A3A3A;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    height: 30px;
    width: 150px;
    padding: 15px;
    color: black;
}

.header > .nav > ul > li > a:hover, a:active {
    color: #000000;
    background: #212121;
}

#ucp, #test{
    font-family: 'Acptitle';
    margin: 15px 0 0 5%;
    width: 40%;
    height: 45px;
    float: left;
    box-shadow: inset 0 0 20px #000000;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    padding: 10px;
    text-align: center;
}

#test{
    display: none;
    height: 300px;
    width: 40%;
}

.project {
    font-family: 'Acptitle';
    margin: 15px 5% 0 0;
    width: 40%;
    height: 45px;
    float: right;
    box-shadow: inset 0 0 20px #000000;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    padding: 10px;
    text-align: center;
}

.updates {
    font-family: 'Acptitle';
    margin: 15px 5% 0 0;
    width: 40%;
    height: 45px;
    float: right;
    box-shadow: inset 0 0 20px #000000;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    padding: 10px;
    text-align: center;
}

.homecontent {
    font-family: 'Acptitle';
    margin: 15px 0 0 5%;
    width: 40%;
    height: 45px;
    float: left;
    box-shadow: inset 0 0 20px #000000;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    padding: 10px;
    text-align: center;
}

.portofolio {
    font-family: 'Acptitle';
    margin: 15px 0 0 5%;
    width: 40%;
    height: 45px;
    float: left;
    box-shadow: inset 0 0 20px #000000;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    padding: 10px;
    text-align: center;
}

.about {
    font-family: 'Acptitle';
    margin: 15px 5% 0 0;
    width: 40%;
    height: 45px;
    float: right;
    box-shadow: inset 0 0 20px #000000;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    padding: 10px;
    text-align: center;
}

这一切。我在其他网站上没有问题。我认为我的网站浏览器不是问题。我正在使用谷歌浏览器顺便说一句。我也在 IE9 和 Firefox 中尝试过。

4

4 回答 4

1

您必须先隐藏要切换的元素。

因此，在您的情况下，您需要隐藏testdiv。

CSS：

#test {
    display:none;
}

它现在应该可以工作了。

在这里提琴

编辑：仔细检查，你不应该隐藏它。正如 Jai 在下面指出的那样，检查 jquery 库是否被正确引用。

于 2013-05-22T06:56:23.040 回答
0

有时，如果您在代码中提供没有任何协议的库 src，则会发生这种情况：

<script type="text/javascript" scr="//ajax.googleapis.com/ajax/lib..."></script>
//                                 ^-------Here

通过放置一些协议来尝试https:一次http:

<script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
于 2013-05-22T06:55:56.647 回答
0

假设没有 JavaScript 错误，您的代码应该可以正常工作。这是一个证明它工作的小提琴。Gebruikers beheer当您使用幻灯片效果单击hallo hallo hallo hallo切换进出视图时。

但是，您引用的其他脚本可能会导致 JavaScript 错误，从而导致一切中断。一种故障排除技术是减少代码，以便您只使用绝对必要的代码。尝试以下操作：

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
      $("#ucp").click(function () {
          $("#test").slideToggle("slow");
      });
  });
</script>
</head>

<body>
  <div id="ucp">Gebruikers beheer</div>
  <div id="test">hallo hallo hallo hallo</div>
</body>

</html>
于 2013-05-22T06:56:21.993 回答
0

它在小提琴中工作......试试这里http://jsfiddle.net/CdWnx/

会不会是你错过了 jQuery 参考中的 http 部分？

<script type="text/javascript" scr="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
于 2013-05-22T06:57:48.093 回答