0

当我单击缩略图 ( .framesButton) 时，它会滑动打开一个面板，这很好。我只是希望它还添加一个类 ( .frameSelected)，它将带有黑色小三角形的背景添加到img' 的父<li>级中，如果我单击和关闭与我刚刚切换的相同的缩略图，那么目前这种工作方式。但是，如果我在滑动面板仍然打开的情况下单击另一个缩略图，我会得到一个三角形，但面板是封闭的。你可以在这里看到：

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

到目前为止，我的代码是：

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

不幸的是，我的 jQuery 对我来说仍然是基本的，无法将我想要的内容转换为代码。

4

2 回答 2

0

您总是在切换容器的可见性

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

无论是否单击相同的缩略图。

一种解决方案是测试单击的元素是否是先前单击的元素，您可以通过测试其父元素是否具有 class 来做到这一点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使用信息填充元素的准确程度，即您是为每个缩略图设置一个，还是为每一行设置一个，或者为整个列表设置一个。
弄清楚这一点后，您将不得不调整上述解决方案。

于 2013-02-22T11:42:01.483 回答
0

简而言之，只需这样做：

$(".framesButton").click(function(){  
    $(".lensesDetail").slideUp('slow',function(){
       $(".lensesDetail").slideDown('slow');
    });  
    $(this).parent().toggleClass('frameSelected');
    $(this).parent().siblings().removeClass('frameSelected');
});
于 2013-02-22T11:46:29.917 回答