Question

在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与在代码笔上相同。
有什么问题吗？

Answer 1

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

Answer 2

您必须将脚本放在body标签关闭之前。引起的问题是因为脚本是在选择和操作实际元素之前加载的。

希望这会有所帮助！

Answer 3

这是在本地浏览器中打开的最小index.html文件，我的猜测是因为您没有使用jQuery的$('document').ready()函数，并且没有在底部包含脚本，所以它尝试应用您的回调函数到一个空的DOM。

index.html

<style> 
    body {
  font-family: Helvetica, sans-serif;
  font-size:15px;
  }

a {
  text-decoration:none;
}
ul.tree, .tree li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
}

.tree ul {
  display:none;
}

.tree > li {
  display:block;
  background:#eee;
  margin-bottom:2px;
}

.tree span {
  display:block;
  padding:10px 12px;

}

.icon {
  display:inline-block;
}

.tree .hasChildren > .expanded {
  background:#999;
}

.tree .hasChildren > .expanded a {
  color:#fff;
}

.icon:before {
  content:"+";
  display:inline-block;
  min-width:20px;
  text-align:center;
}
.tree .icon.expanded:before {
  content:"-";
}

.show-effect {
  display:block!important;
}
</style>
<body>
    <div class="row">
        <div class="twelve columns">
            <div class="row">
                <div class="eight columns">
                    <ul class="tree">

                        <li class="tree__item">
                            <span>
                                <a href="#">Вопросы</a>
                            </span>

                        </li>

                        <li class="tree__item hasChildren">
                            <span>
                                <div class="icon"></div>
                                <a class="question" href="#">Вопрос 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>

                        <li class="tree__item hasChildren">

                            <span>
                                <div class="icon"></div>
                                <a class="question" href="#">Вопрос 2</a>
                            </span>

                            <ul>
                                <li>
                                    <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>
                                </li>

                            </ul>

                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
    <script>
    $('.tree .question, .icon').click( function() {
        $(this).parent().toggleClass('expanded').
        closest('li').find('ul:first').
            toggleClass('show-effect');
    });


    </script>
</body>

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

3 个答案: