javascript - if($(var).css ('display' ) == "block") 与 slideToggle？

Question

我正在尝试更改选项标题 (.option-title) 上显示的图标(.add_to_rotation) 向上或向下切换。向下时，应显示关闭 (.retract-icon) 按钮，向上时应显示添加 (.expand-icon)。

我认为问题在于从调用 slideToggle 到调用它的属性从 display: hidden 更改为 display 的延迟: block ，反之亦然。

这是我的代码:

$('.option-title').click( function() {
      var name = $(this).attr('id');
      $('.' + name).slideToggle('slow');
      if($('.' + name).css('display') == "block") {
        $(this).html("Add to Rotation? <div class=\"retract-icon\">");
      } else {
        $(this).html("Add to Rotation? <div class=\"expand-icon\">");
      }
  });

if() 条件的第一部分执行得很好，所以条件必须被认为是真的，但是当再次点击时，第一个条件仍然被认为是真的，并且 的内容.option-title 不变。

我怎样才能让它按照我上面的描述工作？

如有任何帮助，我们将不胜感激 ;)。

Answer 1

我看到有两种简单的方法可以解决这个问题。

代替使用 slideToggle，首先检测条件，然后使用 slideUp 或 slideDown，这将使您的消息在幻灯片发生时出现:

$('.option-title').click( function() {
      var name = $(this).attr('id');
      var slider = $('.' + name); // shortcut to the element that's being slid. There's probably a better variable name you can use but I don't know the context
      if(slider.css('display') == "block") {
            slider.slideUp('slow');
            $(this).html("Add to Rotation? <div class=\"retract-icon\">");
      } else {
            slider.slideDown('slow');
            $(this).html("Add to Rotation? <div class=\"expand-icon\">");
      }
  });

或者使用回调，这意味着您的消息在幻灯片完成之前不会出现:

$('.option-title').click( function() {
      var name = $(this).attr('id');
      var slider = $('.' + name); // shortcut to the element that's being slid. There's probably a better variable name you can use but I don't know the context
      slider.slideToggle('slow', function() {
        if(slider.css('display') == "block") {
            $(this).html("Add to Rotation? <div class=\"retract-icon\">");
        } else {
            $(this).html("Add to Rotation? <div class=\"expand-icon\">");
        }
      });
  });