用jQuery切换类

Question

当我点击一个缩略图（.framesButton）时，它滑动打开一个很好的面板。我只是希望它也添加一个类（.frameSelected），它将带有小黑色三角形的背景添加到img的父母<li>这种类型的作品现在适用于单击和关闭缩略图，因为我只是切换。但是，如果我在滑动面板仍然打开的同时点击另一个缩略图，我会看到一个三角形但带有一个封闭的面板。你可以在这里看到：

http://oaeyewear.4pixels.co.uk/brands.html

到目前为止我的代码是：

$('.framesButton').click(function() { 
     $(this).parent().toggleClass('frameSelected'); 
     $(this).parent().siblings().removeClass('frameSelected'); 
}); 

不幸的是我的jQuery的仍然是基本由我来翻译一下我想转换成代码。

Answer 1

你总是切换容器的能见度

$(".framesButton").click(function(){ 
    $(".lensesDetail").slideToggle('slow'); 
}); 

不管相同的缩略图是否被按下。

解决方法是测试点击的元素是否是先前点击的元素，您可以通过测试其父元素是否具有类frameSelected来完成。如果是，隐藏容器，如果没有，请将其打开或打开。

合并两组单击事件处理程序：

$('.framesButton').click(function() { 
    var $parent = $(this).parent(); 

    if ($parent.hasClass('frameSelected')) { 
     // toggle visibility of container 
     $('.lensesDetail').slideToggle('slow'); 
    } 
    else { 
     // show the container - won't do anything if already open 
     $('.lensesDetail').slideDown('slow'); 
    } 

    $parent.toggleClass('frameSelected') 
     .siblings('.frameSelected').removeClass('frameSelected'); 
}); 

---

的解决方案取决于你究竟是如何填充与信息.lensesDetail元素，即你是否有一个对每个缩略图或每行一个或一个用于整个列表。
一旦你想出来，你将不得不调整上述的解决方案。

Answer 2

在短期和简单的只是这样做：

$(".framesButton").click(function(){ 
    $(".lensesDetail").slideUp('slow',function(){ 
     $(".lensesDetail").slideDown('slow'); 
    }); 
    $(this).parent().toggleClass('frameSelected'); 
    $(this).parent().siblings().removeClass('frameSelected'); 
});