Question

我有三个从头开始隐藏的元素，还有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");  
        }
    });
  });
});

SlideToggle back和removeClass？

1 个答案: