检查是否 div 已经显示，并将其隐藏答案

【问题标题】：check to see if div is already showing, and hide it检查是否 div 已经显示，并将其隐藏
【发布时间】：2015-03-09 11:34:01
【问题描述】：

我正在为我的手机网站进行响应式设计。我在 3 个图标的“a”标签内有一个“img”标签，如下所示：

  <a href="#"><img src="images/webIcon.png" data-attr="webIcon"></a>

在所有其他屏幕尺寸上，当用户将鼠标悬停在图标上时，会出现说明，然后在鼠标离开时再次消失。但是在手机上，当他们向下滚动查看描述时，它已经消失了，所以我将其更改为“a”标签上的点击事件。
我已成功将内容添加到我想要的位置当用户单击相应的图标时，但在单击下一个图标或再次单击同一个图标时我无法隐藏它。
这是我所拥有的：

    $('#mobileServices a').hover(function(e) {
      e.preventDefault();
      //Grab the corresponding description for the icon
      data = $(this).children('img').attr('data-attr');
      section = $('#' + data + '').html();

      //Plop in the new section containing the description below the icon
      $(this).after('<section class=' + data + '>' + section + '</section');

      //So I figured perhaps I should store-off the new sections for later use
      newSection = $('section.' + data + '');
    });

然后我想：我将使用一个简单的 if 语句来检查 newSection 是否可见，如果是，将其隐藏（或向上滑动，或 slideToggle），但该逻辑不起作用。我正在进入 if 语句，因为我使用 console.log(s) 检查了它。我试过类似的东西：

      if('section:visible') {
         newSection.slideToggle();
      }

但显然这不起作用，因为它只是将其向下滑动然后立即向上滑动。所以，现在我被卡住了......非常感谢任何帮助！！！！！！

【问题讨论】：

您能否添加一个 JSFiddle 链接来显示您的问题。

标签： javascript jquery html css responsive-design

【解决方案1】：

我认为您的问题可能在于您尝试使用的 if 语句。您需要先使用$('section') 获取元素，然后使用.is(":visible");。所以，把它绑在一起：

// Checks for display:[none|block], ignores visible:[true|false]
if($('section').is(":visible")) {
    $('section').hide();
}

这将隐藏所有部分，并且应该实现接近您正在寻找的东西。然后，您可以使用 newSection.slideToggle() 展示您的新产品，然后就可以开始使用了。

【讨论】：