Question

我正在尝试编写一个简单的函数，我单击一个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");
        }
});

Answer 1

而不是测试可见性，测试类？

$(".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");
        }
});

Answer 2

使用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");
   });

这似乎对我有用。

Answer 3

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

展开/折叠，更新图标类

3 个答案: