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()条件的第一部分执行正常，因此必须将条件视为true，但再次单击时，第一个条件仍被视为true，.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\">");
        }
      });
  });

Answer 2

至少部分问题可能您正在混合classes和ids。

您在此处检索id

var name = $(this).attr('id');

但随后在此处搜索class

$('.' + name).slideToggle('slow');

不确定这是你想要做的。

如果没有，请将$('.' + name)更改为$('#' + name)

if（$（var）.css（'display'）==“block”）with slideToggle？

2 个答案: