Question

我有一个订阅表单，当用户单击按钮（＃sub-header）时，该表单会落在导航上方。该按钮在导航下方。我的导航是固定的，因此此按钮的顶部为60px，以使其保持在导航下方。但是，当单击该按钮并且订阅表单下拉时，该按钮和导航之间的间隔为60px。仅当订阅表单打开时，我才需要将按钮的顶部从60px更改为0px。这是我的代码：

 if ($('.subscription-signup').css('display') == 'none') {
     $('#sub-header').css("top", "60px");
 } else if ($('.subscription-signup').css('display') == 'block') {
     $('#sub-header').css("top", "0px"); 
 };

这是我的html代码：

<div class="subscription-signup">
    <div class="subscription-close" id="subscription-close">&nbsp;</div>
    <div class="email-signup">  
      <form></form>
    </div>
  </div>

这是打开表单的代码（有效）：

var $subscribeContent = $('.subscription-signup');
var $subscribeClose = $('#subscription-close');

$subscribeContent.hide();

$subscribe.on('click', function(e) {
    e.preventDefault();
    $subscribeContent.slideToggle();
});

 $subscribeClose.on('click', function(e) {
    e.preventDefault();
$subscribeContent.slideToggle();
});

由于某种原因，当订阅表单打开并设置为display：block时，顶部不会更改为0px。我的代码有问题吗？谁能弄清楚该怎么做？

Answer 1

使用

$('.subscription-signup').is(':hidden')

代替

Answer 2

为什么不只向元素添加类？

$subscribe.on('click', function(e) {
  e.preventDefault();
  $('.subscription-signup').addClass('subOpen');
  $subscribeContent.slideToggle();
});

$subscribeClose.on('click', function(e) {
  e.preventDefault();
  $('.subscription-signup').removeClass('subOpen');
  $subscribeContent.slideToggle();
});

.subscription-signup {
  top: 0px;
}

.subOpen {
  top: 60px;
}

检查元素是否显示：块，不起作用

2 个答案: