个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
为什么 jquery 切换没有触发任何内容来折叠描述？我尝试移动标题中的 CDNJS 链接 - 没有任何内容，向下移动到正文标记的内部和外部，没有任何效果。它仅适用于 JSFIDDLE
在我决定发布此内容之前，我研究并发现了一些类似的问题，但仍然对我不起作用。我在这里错过了什么吗？
HTML -
<div class="parent-container">
<ul class="faq">
<li>
<h3 class="question">SVRS Header 1
<div class="plus-minus-toggle collapsed"></div>
</h3>
<div class="answer">Donec vitae tellus risus. Aenean sed fermentum risus. Phasellus venenatis <br><br>
ultricies dignissim. Nunc ante lectus, accumsan non porta at. Donec vitae tellus risus. Aenean sed
fermentum risus. Phasellus venenatis ultricies dignissim.</div>
</li>
<li>
<h3 class="question">SVRS Header 2
<div class="plus-minus-toggle collapsed"></div>
</h3>
<div class="answer">onec vitae tellus risus. Aenean sed fermentum risus. Phasellus venenatis <br><br>
ultricies dignissim. Nunc ante lectus, accumsan non porta at. Donec vitae tellus risus. Aenean sed
fermentum risus. Phasellus venenatis ultricies dignissim.</div>
</li>
<li>
<h3 class="question">SVRS Header 3
<div class="plus-minus-toggle collapsed"></div>
</h3>
<div class="answer">onec vitae tellus risus. Aenean sed fermentum risus. Phasellus venenatis <br><br>
ultricies dignissim. Nunc ante lectus, accumsan non porta at. Donec vitae tellus risus. Aenean sed
fermentum risus. Phasellus venenatis ultricies dignissim.</div>
</li>
</ul>
</div>
JS 切换 -
$('.faq li .question').click(function () {
$(this).find('.plus-minus-toggle').toggleClass('collapsed');
$(this).parent().toggleClass('active');
});
CSS
.parent-container {
padding: 0 20px 0 20px;
max-width: 800px;
width: 100%;
}
.faq {
list-style: none;
padding-left: 40px;
padding-right: 20px;
}
.faq li.active .answer {
max-height: 275px !important;
transition: max-height 0.5s ease, padding-bottom 0.5s ease;
}
.faq li.active .question {
color: #808080;
transition: color 0.5s ease;
}
.faq .answer {
color: #090909;
font-family: serif;
font-size: 16px;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease, padding-bottom 0.5s ease;
}
.faq .plus-minus-toggle {
cursor: pointer;
height: 20px;
position: absolute;
width: 20px;
left: -40px;
top: 50%;
z-index: 2;
}
.faq .plus-minus-toggle:before, .faq .plus-minus-toggle:after {
background: #000;
content: "";
height: 5px;
left: 0;
position: absolute;
top: 0;
width: 20px;
transition: transform 500ms ease;
}
.faq .plus-minus-toggle:after {
transform-origin: center;
}
.faq .plus-minus-toggle.collapsed:after {
transform: rotate(90deg);
}
.faq .plus-minus-toggle.collapsed:before {
transform: rotate(180deg);
}
.faq .question {
color: #090909;
font-family: sans-serif;
font-size: 20px;
font-weight: 800;
text-transform: uppercase;
position: relative;
cursor: pointer;
padding: 5px 0;
transition: color 0.5s ease;
}
@media screen and (max-width: 767px) {
.faq .question {
font-size: 18px;
}
}
最佳答案
可以通过控制台得到答案:Uncaught ReferenceError: $ is not Define
出现此错误的原因是您在加载 jQuery 库之前使用了 jQuery 语法/函数。
最简单的可视化是这样的:
console.log(a);
let a = "test";要运行您的网站，您应该始终将 jQuery 脚本加载标记放在自定义编码内容之前的头部部分。
您的网站应如下所示:
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
//do jQuery here
</script>
</head> 关于javascript - jQuery 切换根本不触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61018887/
25
4
0
我遇到了一个似乎很独特的问题。我的 NSUbiquitousKeyValueStore 在模拟器中的启动之间根本不起作用。也就是说，我什至不是在谈论 iCloud 同步或类似的东西，我无法让它通过下面
首先，我使用的是 WiX 版本 3.5.2519.0，但我也在最新的 3.6 版本上测试了它，结果相同。 我很难确定 PatchFamily 究竟能过滤掉 torch 生成的差异的某些部分。按照手册中
我可以获取要呈现的“帮助主题”标题，但无法获取我定义的任何FIXTURES。 {{#each model}} 中的任何内容都不会渲染。这是我第一次使用 Ember，所以任何东西(字面意义上的任何东
我一直在尝试设置custom ajaxTransports for jQuery在我们的产品的某些场景下缩短某些工作流程。然而，我在让这些传输受到尊重方面取得了零成功(而我有很多工作 custom a
为什么纯无类型 lambda 演算经常被描述为无法使用？ 有了合适的函数库，它会不会与任何其他函数式语言大致相同？ 最佳答案 速度不是大问题。例如，您可以决定使用教堂数字但优化实现，以便像往常一样表示
我是一名优秀的程序员,十分优秀！