Question

这是我的问题。我有你在下面看到的代码。为什么它不像它在这里那样工作：http://jsfiddle.net/e6kaV/33/？
有错误显示给我：
{
  “message”：“未捕获的ReferenceError：$未定义”，
  “filename”：“http://stacksnippets.net/js”，
  “lineno”：54，
  “colno”：13
} 感谢每一个帮助，因为我不知道JS或jQuery是如何工作的。

.pane-launcher{
    position:absolute;
    top: 0;
    width:80px;
    height:80px;
    display:block;
}
#rules {
    left:0px;
}
#scenarios {
    left:90px;
}
.pane{
    position:absolute;    
    left: 0;
    height:50px;
    display:none;
    opacity:1;
}
#rules-pane {
    top:80px;
    width:170px;
    background-color:yellow;
}

#scenarios-pane {
    top:80px;
    width:170px;
    background-color:blue;
}

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>TEST</title>
        <link rel="stylesheet" href="css.css">
    </head>
    <body>
        <div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
        <div id="rules-pane" class="pane">Model1</div>
        <div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
        <div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div>

        <script>
            $(".pane-launcher").click(function () {
	// Set the effect type
    var effect = 'slide';
 
    // Set the options for the effect type chosen
    var options = { direction: 'up' };
 
    // Set the duration (default: 400 milliseconds)
    var duration = 700;
    $('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
});</script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </body>
</html>

Answer 1

在使用之前加载jQuery：

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>TEST</title>
        <link rel="stylesheet" href="css.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
        <div id="rules-pane" class="pane">Model1</div>
        <div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
        <div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div>

    <script>
    $(".pane-launcher").click(function () {
      // Set the effect type
      var effect = 'slide';

      // Set the options for the effect type chosen
      var options = { direction: 'up' };

      // Set the duration (default: 400 milliseconds)
      var duration = 700;
      $('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
    });
    </script>
    </body>
</html>

我把它放在<head>中，但你可以把它放在任何地方，只要它在使用$的代码之前（$是jQuery）。

Answer 2

您应该在使用之前添加jquery。这是工作示例。我刚从底部删除了jquery的脚本标记，并将其放在其他脚本之前。

这是笔http://codepen.io/anon/pen/xOzjWg

 $(".pane-launcher").click(function () {
	// Set the effect type
    var effect = 'slide';
 
    // Set the options for the effect type chosen
    var options = { direction: 'up' };
 
    // Set the duration (default: 400 milliseconds)
    var duration = 700;
    $('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
});

.pane-launcher{
      position:absolute;
        top: 0;
        width:80px;
        height:80px;
        display:block;
    }
    #rules {
        left:0px;
    }
    #scenarios {
        left:90px;
    }
    .pane{
        position:absolute;    
        left: 0;
        height:50px;
        display:none;
        opacity:1;
    }
    #rules-pane {
        top:80px;
        width:170px;
        background-color:yellow;
    }

    #scenarios-pane {
        top:80px;
        width:170px;
        background-color:blue;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="rules-pane" class="pane">Model1</div>
<div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div>

Answer 3

感谢大家的帮助，在我加入这3个脚本链接（这是建议的相关问题的答案）之后开始工作。

＆＃13;

        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

＆＃13;

Javascript元素折叠不起作用

3 个答案: