gpt4 book ai didi

javascript - 为什么jQuery显示&隐藏效果只对嵌入式css显示有效 :none?

转载 作者:行者123 更新时间:2023-11-28 10:32:51 24 4
gpt4 key购买 nike

我有几个加载到 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");

Fiddle Demo

关于javascript - 为什么jQuery显示&隐藏效果只对嵌入式css显示有效 :none?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23452876/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com