javascript - 自动显示隐藏 DIV Javascript 语法

Question

javascript中的一个小疑问接受此代码

$('#B').css("display", "none" : "block");

如果 div Bdisplay: none在事件自动切换到阻止

标签： javascriptjquery

Answer 1

在初始化时，您可以使用 jQuery 的:hidden选择器进行检查

// App init:
$('#B:visible').hide();

比在某些事件上需要.toggle()时：

// Some event:
$('#B').toggle();

例子：

$("[data-toggle]").on("click", function() {
  $(this.dataset.toggle).toggle();
});

<button data-toggle="#B" type="button">Toggle B</button>
<div id="B">Lorem ut florem</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

替代使用 jQuery 的 show/hide/toggle 方法的首选方法是.toggleClass()在 CSS 中使用和定义所需的样式

$("[data-toggle]").on("click", function() {
  $(this.dataset.toggle).toggleClass("is-hidden");
});

/* Bool helpers */
.is-hidden { display:none; }

<button data-toggle="#B" type="button">Toggle B</button>
<div id="B" class="is-hidden">Lorem ut florem</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>