如果所述 div 为空,我想将标题隐藏在 div 上方。 content div 的内容会因用户输入而改变。 我希望点击按钮后 heading1 立即出现。
我更喜欢 css 解决方案,但我已经在页面上使用 jquery 和大量 javascript,所以我对所有解决方案持开放态度。
可以给所有的标题一个唯一的 ID,如果这样更容易的话
function addcontent()
{
document.getElementById("Content1").innerHTML = "Extra Content";
}
$(".rulescontent:empty").parent().hide();
$(!".rulescontent:empty").parent().show();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<h1>heading1</h1>
<div style="font-size:90%" id="Content1" class="rulescontent"></div>
</div>
<div>
<h1>heading2</h1>
<div style="font-size:90%" id="Content2" class="rulescontent"></div>
</div>
<button type='button' onclick="addcontent()">add content</button>
其他 Stakcoverflow 解决方案也不会让内容不再为空后重新出现。
最佳答案
您需要创建一个函数并在将内容附加到您的 div 时调用它
function addcontent() {
document.getElementById("Content1").innerHTML = "Extra Content";
toggleEmpty()
}
function toggleEmpty() {
$(".rulescontent:empty").parent().hide();
$(".rulescontent:not(:empty)").parent().show();
}
toggleEmpty()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<h1>heading1</h1>
<div style="font-size:90%" id="Content1" class="rulescontent"></div>
</div>
<div>
<h1>heading2</h1>
<div style="font-size:90%" id="Content2" class="rulescontent"></div>
</div>
<button type='button' onclick="addcontent()">add content</button>
关于javascript - 如果另一个元素为空,如何动态隐藏 html 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56804670/