Question

你好我第一次来这里，

我得到了一个基本的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;
}

这一切。我在其他网站上没有问题。我认为我的网站浏览器不是问题。我正在使用Google Chrome btw。我也试过IE9和firefox。

Answer 1

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

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

<强> CSS：

#test {
    display:none;
}

现在应该可以了。

小提琴here

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

Answer 2

有时候，如果您在没有任何协议的情况下提供库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>

Answer 3

假设没有JavaScript错误，您的代码应该可以正常工作。这是一个Fiddle，证明它有效。当您点击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>

Answer 4

它在小提琴中工作......试试这里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>

jQuery slideToggle（）不起作用

4 个答案: