Auto Show 隐藏 DIV Javascript 语法

Question

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

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

如果div B 在事件上display: none自动切换到阻止

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>

一种首选的方法是使用.toggleClass()并在CSS中定义所需的样式，而不是使用jQuery的show/hide/toggle方法。

$("[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>