Question

我有一个div来显示我在隐藏的页面上最近查看的项目，如果它使用innerHTML为空，那么外部空框不会显示并且它可以正常工作。问题是，在查看某个项目之前，它会在页面上留下一个很大的漏洞。

我一直试图做的是显示另一个div，如果div id =“recentinc”被隐藏，一旦div id =“recentinc”有内容，它将被隐藏。

到目前为止，这是我的代码：

<div id="recentinc"><?php include 'recentview.php'; ?></div>
<script type="text/javascript">
if (document.getElementById('recentinc').innerHTML == '')
    document.getElementById('recently_viewed').style.display = 'none';
</script>
</div>

我想要另一个div，例如。

<div id="copy">more content</div>

当div id =“recentinc”被隐藏时会显示。

使用jQuery可能有更好的方法，但我找不到答案。

非常感谢任何帮助。

Answer 1

不确定那个伟大的大洞是什么，因为将显示设置为'none'将从流中移除元素。尝试设置visibilty而不是仅用display:none隐藏它，这样它将不可见但仍然占据相同的空间并仍然在文档流中：

if (document.getElementById('recentinc').innerHTML == '')
    document.getElementById('recently_viewed').style.visibility = "hidden";

或jQuery：

$("#recently_viewed").css('visibility', $("#recentinc").is(":visible")?'hidden':'visible');

Answer 2

试试这个：

<div id="recentinc"><?php include 'recentview.php'; ?></div>
<script type="text/javascript">
if ($('#recentinc').html().length<1)
{
  $('#recently_viewed').hide();
}
</script>
</div>

Answer 3

根据我的理解，您希望根据#copy的空虚显示/隐藏#recentinc，并针对#recently_viewed执行相反的操作。

var showRecent = $("#recentinc").children().length > 0;
$("#recently_viewed").toggle(showRecent);
$("#copy").toggle(!showRecent);

如果另一个隐藏，则显示另一个div

3 个答案: