我有几个加载到 handlebars 默认布局中的 .handlebars 模板，使用 handlebars 作为 node.js 的 View 引擎
使用 {{{ 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();
});
});
最佳答案
我认为您为 input 元素复制了 id。由于 id 必须是唯一的，因此您需要改用类:
<input type="checkbox" class="theBtn" />
之后，您只需要定位您点击的input父标签的前一个兄弟.theDiv，目前您已经定位了所有.div ，所以你可以使用:
var $when = $(this).parent().prev();
代替:
var $when = $(".theDiv");
关于javascript - 为什么jQuery显示&隐藏效果只对嵌入式css显示有效 :none?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23452876/