jQuery slideToggle（）不起作用

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 Chrome。 我也在IE9和Firefox中嘗試過。

Answer 1

您必須隱藏要首先切換的元素。

因此，在您的情況下，您需要隱藏test div。

CSS：

#test {
    display:none;
}

現在應該可以了。

在這里擺弄

編輯：仔細檢查后，您不必隱藏它。 檢查Jai在下面指出的jquery庫是否正確引用。

Answer 2

有時，如果您給庫src加上代碼中的任何協議，就會發生這種情況：

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

通過放入一些協議（例如https:或http: https:嘗試一次

<script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Answer 3

假設沒有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>

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 個解決方案

解決方案1
1 2013-05-22 06:56:23

解決方案2
0 2013-05-22 06:55:56

解決方案3
0 2013-05-22 06:56:21

解決方案4
0 2013-05-22 06:57:48

jQuery slideToggle（）不起作用

問題描述

4 個解決方案

解決方案1 1 2013-05-22 06:56:23

解決方案2 0 2013-05-22 06:55:56

解決方案3 0 2013-05-22 06:56:21

解決方案4 0 2013-05-22 06:57:48

解決方案1
1 2013-05-22 06:56:23

解決方案2
0 2013-05-22 06:55:56

解決方案3
0 2013-05-22 06:56:21

解決方案4
0 2013-05-22 06:57:48