我有几个.handlebars模板，这些模板加载到车把的默认布局中，使用车把作为node.js的视图引擎。
模板使用{{{body}}} html转义符加载到body标签中：
<body>
{{{ body }}}
</body>
当涉及到模板中的div时。为什么jQuery显示/隐藏效果以这种方式工作：
<label class="btn">
<input type="checkbox" id="theBtn"> theBtn
</label>
..a bunch of html..
<div class="theDiv" style="display:none;"></div>
$(document).ready(function () {
$("#theBtn").change(function() {
$(".theDiv").slideToggle();
});
});
但是，只有在HTML以默认布局而不是模板直接编写的情况下，这种方式才有效：
.hide {
display: none;
}
<label class="btn">
<input type="checkbox" id="theBtn"> theBtn
</label>
..a bunch of html..
<div class="theDiv hide"></div>
$(document).ready(function () {
$("#theBtn").on('click', function () {
var $when = $(".theDiv");
$when.slideToggle();
$(".theDiv").not($when).slideUp();
});
});
最佳答案
我认为您已经为id元素复制了input。由于id必须是唯一的，因此您需要使用class：
<input type="checkbox" class="theBtn" />
之后，您只需定位所单击的
.theDiv的父标签的上一个兄弟input兄弟，当前已定位所有.div，因此可以使用：var $when = $(this).parent().prev();
代替：
var $when = $(".theDiv");
Fiddle Demo
关于javascript - 为什么jQuery display＆hide效果仅适用于嵌入式CSS display:none？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23452876/