展開/摺疊，更新圖標類

我正在嘗試編寫一個簡單的函數，其中我單擊一個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

展開/摺疊，更新圖標類

回答

相關問題