Показать/скрыть и изменить значок с 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, который был выбран, к близко другого элемента и 2) для щелкать div.feature, что не был выбран для открыть другой элемент. Возможно, что-то вроде этого:

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