Question

我正致力于手机网站的响应式设计。我有一个＆＃34; img＆＃34;标签内的＆＃34; a＆＃34;标记为3个图标，如下所示：

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

在所有其他屏幕尺寸上，当用户将鼠标悬停在图标上时，会显示说明，然后在鼠标关闭时再次消失。但是在移动电话上，当他们向下滚动查看说明时，它已经消失了，所以我将其更改为＆＃34; a＆＃34;我已经在用户点击相应的图标时成功添加了我想要的内容，但是在点击下一个图标时，或者点击了再来一次。
这就是我所拥有的：

    $('#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是否可见，如果是，则隐藏它（或将其向上滑动，或者滑动它），但该逻辑不是＆＃39工作。我进入了if语句，因为我用console.log检查了它。我试过像：

      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()展示新的，并且可以继续使用。

检查div是否已经显示，并隐藏它

1 个答案: