Javascript元素折叠不起作用

Javascript element collapsing not working

本文关键字：不起作用 折叠 元素 Javascript      更新时间：2023-09-26

这是我的问题。我有你在下面看到的代码。为什么它不像这里那样工作：http://jsfiddle.net/e6kaV/33/
有一个错误显示给我：
｛
"message"："未定义未捕获引用错误：$"，
"文件名"："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>

在使用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）。

您应该先添加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>

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

        <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>

相关文章：