用jQuery顯示/隱藏和更改圖標

Question

好吧，我有幾個元素，點擊時他們需要更改圖標並顯示相應的隱藏元素。我覺得我很接近，但仍缺少的東西和代碼的工作只是部分：

的JavaScript：

$(".fList").hide(); 
$(".features").click(function() { 
    var that = this; 
    var pid = $(this).attr("id")+"C"; 
    $(".fList:visible").slideUp(); 
    $(".features .ui-icon-triangle-1-s").removeClass("ui-icon-triangle-1-s").addClass("ui-icon-triangle-1-e"); 
    $("#"+pid).slideDown(function(){ 
     $("span.ui-icon-triangle-1-e", that).removeClass("ui-icon-triangle-1-e").addClass("ui-icon-triangle-1-s"); 
    }); 
}); 

HTML：

<table> 
<tr> 
    <td id="f1" class="features"> 
    <span class="uico ui-icon-triangle-1-e icoSpan"></span>Features 
    </td> 
    <td id="f2" class="features"> 
    <span class="uico ui-icon-triangle-1-e icoSpan"></span>Features 
    </td> 
</tr> 
</table> 

<div id="f1C" class="fList"> 
111111 
</div> 

<div id="f2C" class="fList"> 
22222 
</div> 

我在想什麼？我需要能夠關閉所有或打開只有一個區域...代碼

Answer 1

兩部分打我的問題：

$(".fList:visible").slideUp(); 

如果.fList元素是不可見的，滑動起來不會做任何事情，所以你可能想用簡單的測試：

$(".fList").slideUp(); 

而且我認爲，爲了使用了slideDown（），該元素必須事先「滑動」或顯示：無......但我m不是100％肯定的，所以當你試圖通過slideDown（）顯示一個元素時可能會導致問題。

接下來，我很困惑，爲什麼變量that包含在以下行：

$("span.ui-icon-triangle-1-e", that) 

變量that指點擊的元素，這似乎沒有什麼你的類添加或刪除 - 你確定你想改變它的類嗎？

---

如果你想有兩個不同的行爲：1）單擊一個已經選擇了div.feature，以接近另一個元素和點擊div.feature是沒有被選中2）爲了打開另一個元素。也許是這樣的：

var $features = $('.features'); 
$features.click(function() { 
    var that = this 
     pid = that.attr("id")+"C"; 

    if(that.hasClass('current')) { 
     $features.removeClass('current'); 
     $("#"+pid).slideUp(500, function(){ 
      // Change icons etc.. 
     }); 
    } else { 
     $features.removeClass('current'); 
     that.addClass('current'); 
     $(".fList").slideUp(); 
     $(".features .ui-icon-triangle-1-s").removeClass("ui-icon-triangle-1-s").addClass("ui-icon-triangle-1-e"); 
     $("#"+pid).slideDown(function(){ 
      $("span.ui-icon-triangle-1-e", that).removeClass("ui-icon-triangle-1-e").addClass("ui-icon-triangle-1-s"); 
     }); 
    } 
});