if($(var).css('display')=="block")with slideToggle？

Question

我正在尝试更改选项标题(.option-title)上显示的图标,当下面的内容(例如(.add_to_rotation)向上或向下切换时.向下时,.retract-icon应显示close()按钮,同时.expand-icon应显示add().

我认为的问题在于从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\">");
        }
      });
  });