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

使用jQuery切换类

2 个答案: