个人中心
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
文章推荐： html - 网站维度变化
文章推荐： java - 后退按钮在模拟器上工作，但在 Android 设备上不起作用
文章推荐： javascript - 将 CKFinder 与 InnovaStudio 所见即所得编辑器集成
文章推荐： html - 如何在一段右对齐文本下对齐元素？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com