展开/折叠，更新图标类

我正在尝试编写一个简单的函数，其中我单击一个div并隐藏区域展开，并在另一次单击它折叠。该部分起作用。但是另外，我想在展开时将箭头指示器更改为向上，折叠时则将其更改为向下。这部分似乎只在初始点击时才起作用，当它扩展时，但在区域崩溃时不会改回。我错过了什么？展开/折叠，更新图标类

下面是我写

$(".myDiv").click(function() { 
     var $expandable = $(this).parent().find(".expandable"); 
     $expandable.slideToggle("fast"); 
     if ($expandable.is(":visible")) { 
      $(this).find("span").removeClass("Down").addClass("Up"); 
     } else { 
      $(this).find("span").removeClass("Up").addClass("Down"); 
     } 
});

来源

2012-02-28 santa

你可以给你正在使用的html代码片段吗？ – nightf0x 2012-02-28 19:17:20

您还需要向我们展示您的标记。 – Gabe 2012-02-28 19:17:25

你的html是什么？看起来你很接近，但它似乎是在你的if语句中使用'$（this）''的选择器问题或可能的范围。 – kwelch 2012-02-28 19:17:32

而不是测试上的知名度，测试类？

$(".myDiv").click(function() { 
     var $expandable = $(this).parent().find(".expandable"); 
     $expandable.slideToggle("fast"); 
     var $span = $(this).find("span"); 
     if ($span.hasClass("Down")){ 
      $span.removeClass("Down").addClass("Up"); 
     } else { 
      $span.removeClass("Up").addClass("Down"); 
     } 
});

来源

2012-02-28 19:17:24

更改slideToggle的位置并测试可见。它将始终以您拥有的方式显示。只要您在关闭幻灯片时启动幻灯片，它就会变为“可见”

来源

2012-02-28 19:21:11 charlietfl

使用class进行比较总是一个不错的选择。但是，如果要使用可见性来显示箭头，那么在切换可扩展元素之前，需要检查可见性，因为切换方法会添加延迟，所以当浏览器执行比较行时，元素的可见性已更改。

$(".myDiv").click(function() { 
    var $expandable = $(this).parent().find(".expandable"); 

if ($expandable.css("display") == "none") { 
     $(this).find("span").removeClass("Up").addClass("Down"); 
    } else { 
     $(this).find("span").removeClass("Down").addClass("Up"); 
    }   
    $expandable.slideToggle("fast"); 
    });

这似乎对我来说是诀窍。

来源

2012-02-28 19:41:55 nightf0x

展开/折叠，更新图标类

回答

相关问题