猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

为什么我的 JavaScript 在本地主机上不起作用？

在 codepen https://codepen.io/mkliver/pen/oKbENd我得到了工作脚本。

当我在本地主机上复制此代码时，没有任何效果。我的代码：


<!DOCTYPE html>


<head>

  <meta charset="utf-8" />

  <title>Welcome to Foundation</title>


  <link rel="stylesheet" href="stylesheets/collapsable.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>


<script>

$('.tree .question').click( function() {

  $(this).parent().toggleClass('expanded').

  closest('li').find('ul:first').

  toggleClass('show-effect');

});

</script>

</head>

<body>

   <ul class="tree">


     <li class="tree__item hasChildren">

      <span>

        <div class="icon"></div>

        <a class="question">Question 1</a>

    </span>

    <ul>


        <li>

            <span><a href="#">Everything I seem to investigate lately seems to present itself with an annoying bug/feature in various browsers. Last time it was the inconsistency between browsers and generated content on form elements.</a></span>

        </li>


    </ul>


</li>


</ul>

</body>

collapsable.css与 codepen 相同。

有什么问题？


隔江千里
浏览 156回答 3
3回答

潇湘沐

尝试将 移动<script>到 之前</body>或将其包装在一个额外的 中$()，这是 jQuery 的快捷方式$(document).ready()
0

翻翻过去那场雪

这是一个在本地浏览器中打开的最小 index.html 文件，我的猜测是因为你没有使用 jQuery 的$('document').ready()函数，并且没有在底部包含脚本，它试图将你的回调函数应用于一个空的 DOM。索引.html<style>&nbsp;&nbsp; &nbsp; body {&nbsp; font-family: Helvetica, sans-serif;&nbsp; font-size:15px;&nbsp; }a {&nbsp; text-decoration:none;}ul.tree, .tree li {&nbsp; &nbsp; list-style: none;&nbsp; &nbsp; margin:0;&nbsp; &nbsp; padding:0;&nbsp; &nbsp; cursor: pointer;}.tree ul {&nbsp; display:none;}.tree > li {&nbsp; display:block;&nbsp; background:#eee;&nbsp; margin-bottom:2px;}.tree span {&nbsp; display:block;&nbsp; padding:10px 12px;}.icon {&nbsp; display:inline-block;}.tree .hasChildren > .expanded {&nbsp; background:#999;}.tree .hasChildren > .expanded a {&nbsp; color:#fff;}.icon:before {&nbsp; content:"+";&nbsp; display:inline-block;&nbsp; min-width:20px;&nbsp; text-align:center;}.tree .icon.expanded:before {&nbsp; content:"-";}.show-effect {&nbsp; display:block!important;}</style><body>&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="twelve columns">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="eight columns">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="tree">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="tree__item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Вопросы</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="tree__item hasChildren">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="icon"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="question" href="#">Вопрос 1</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span><a href="#">Everything I seem to investigate lately seems to present itself with an annoying bug/feature in various browsers. Last time it was the inconsistency between browsers and generated content on form elements.</a></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="tree__item hasChildren">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="icon"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="question" href="#">Вопрос 2</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span><a href="#">So I soldiered on and came up with a pretty decent attempt, and remember folks I’m not a designer so be kinder this time with design critiques all I’m doing is showing you how to do the technique ;). With that out of the way let’s dig into the inner workings and road blocks I faced.</a></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>&nbsp; &nbsp; <script>&nbsp; &nbsp; $('.tree .question, .icon').click( function() {&nbsp; &nbsp; &nbsp; &nbsp; $(this).parent().toggleClass('expanded').&nbsp; &nbsp; &nbsp; &nbsp; closest('li').find('ul:first').&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; toggleClass('show-effect');&nbsp; &nbsp; });&nbsp; &nbsp; </script></body>
0

慕妹3146593

您必须将脚本放在 body 标记关闭之前。造成的问题是因为在选择和操作实际元素之前加载脚本。
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript