javascript - 每当屏幕上显示另一个 div 时如何隐藏一个 div。

Question

我有一个默认显示的 helpSection。当用户搜索结果时，页面会重新加载，并且 searchResults 应该显示在帮助部分所在的位置，并且帮助部分设置为 display:none。

我想要一些 jQuery 来搜索页面并确定 helpSection 是否在屏幕上。如果正在显示 searchResults，则 helpSection 应该会消失。

我尝试了各种方法，但都没有奏效。任何帮助将不胜感激。

Answer 1

像这样 ：

if($('#yourElement').is(':visible')) 
{
    $('#yourOtherElement').hide();
}

如果你想显示它，你可以使用 show()，像这样：

$('#yourOtherElement').show();

但是，如果这是在页面加载时确定的，那么使用服务器端语言定义它会更聪明。

Answer 2

您的页面上似乎只有一个帮助部分。

命令式方法： 因此您可以通过使用 getElementById 来检索您的帮助部分元素来解决此问题。如果没有返回元素，则它不会附加到 dom，否则请检查 display 属性。

基于事件的方法（检查浏览器限制）： 如果您只是按需删除帮助部分并将其附加到 dom，则可以绑定 dom 插入和删除以触发其他元素的可见性。这是一个相关的帖子，讨论了事件绑定 是否有一个 jquery 事件在将新节点插入到 dom 时触发？

Answer 3

根据您的 HTML 标记，您可能只使用 CSS 来实现。

CSS

#searchResults + #helpSection {
    display: none;
}

HTML

<div id="searchResults">Search search search</div>
<div id="helpSection">Help help help</div>

上jsfiddle

看看删除后会发生什么：

<div id="searchResults">Search search search</div>