javascript - 检查 div 是否已经显示，并将其隐藏

Question

我正在为我的手机网站设计响应式设计。我在 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();
      }

但显然那是行不通的，因为它只是将它向下滑动然后立即向上滑动。所以，现在我被困住了……非常感谢任何帮助!!!!!!

Answer 1

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

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

这将隐藏所有部分，并且应该实现接近您正在寻找的内容。然后，您可以使用 newSection.slideToggle() 显示您的新模型，然后开始吧。