在 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 相同。有什么问题？
3 回答
翻翻过去那场雪
TA贡献2065条经验 获得超14个赞
这是一个在本地浏览器中打开的最小 index.html 文件，我的猜测是因为你没有使用 jQuery 的$('document').ready()函数，并且没有在底部包含脚本，它试图将你的回调函数应用于一个空的 DOM。
索引.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>
添加回答
举报
0/150
提交
取消