SlideToggle回去和删除类？

Question

我有3个从一开始就隐藏的元素，还有3个链接用slideToggle显示它们。我正在寻找一些解决方案，让我的代码更简单，更聪明。我也有这个问题，当一个元素是可见的，我点击另一个链接，我希望可见的链接切换回来之前切换新。由于我的代码现在只能在单击相同链接时切换回来，但添加粗体字体以指示选定链接的类仍然变为粗体。嗯，这可以以更好的方式完成吗？ Precaite一些帮助！谢谢！

$(document).ready(function(){ 

$("#info").click(function() { 
$("#aktuellt").removeClass("startsida_extra_selected"); 
$("#kontakt").removeClass("startsida_extra_selected"); 
$("#info").addClass("startsida_extra_selected"); 
$("#startbild_info").slideToggle("fast"); 
}); 

$("#aktuellt").click(function() { 
$("#info").removeClass("startsida_extra_selected"); 
$("#kontakt").removeClass("startsida_extra_selected"); 
$("#aktuellt").addClass("startsida_extra_selected"); 
$("#startbild_aktuellt").slideToggle("fast"); 
}); 

$("#kontakt").click(function() { 
$("#info").removeClass("startsida_extra_selected"); 
$("#aktuellt").removeClass("startsida_extra_selected"); 
$("#kontakt").addClass("startsida_extra_selected"); 
$("#startbild_kontakt").slideToggle("fast"); 
}); 

}）;

为jQuery的的HTML代码：

<div id="startbild_info"> 
<p>info</p> 
</div> 

<div id="startbild_aktuellt"> 
<p>aktuellt</p> 
</div> 

<div id="startbild_kontakt"> 
<p>kontakt</p> 
</div> 

Answer 1

$(document).ready(function(){ 

    var elements = $("#info, #aktuellt, #kontakt"); 

    elements.click(function(event) { 
    event.preventDefault(); 

    var element = $(this);  
    var element_id = element.attr("id"); 
    var bild_element = $("#startbild_"+element_id); 

    elements.removeClass("startsida_extra_selected");   

    bild_element.slideToggle("fast", function(){ 
     // After the toggle is finished, check if bild_element has opened or closed 
     // If bild_element has opened the class is added to element. 
     if(bild_element.is(":visible") === true) 
     {    
      element.addClass("startsida_extra_selected"); 
     } 
    }); 
    }); 
});