jquery - 单击元素使其突出显示，并使其他元素不可见

我遇到以下问题。我有包含代表产品的几个div的块。这样的想法是，当用户单击其中一个产品时，产品（div）会突出显示，而其他产品则不那么清晰。到目前为止，我可以解决此问题，但是当用户单击第二个产品时，包括新单击的产品在内，一切都不那么清晰。

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

$(document).ready(function () {

  var $all_listItems = $('.choose-format-block .format-area a');
  $all_listItems.on('click', function () {
    var index = $all_listItems.index(this);
    $(this).siblings().stop().fadeTo(300, 0.6);
    $(this).parent().siblings().stop().fadeTo(300, 0.3);
  });

});

这是我使用jsfiddle的工作示例：http://jsfiddle.net/justamir/P7b5T/2/

希望有人可以帮助我解决这个问题（是jQuery的初学者）。

最佳答案

尽管可以使用jQuery动画来完成此操作，但我建议使用CSS透明度和CSS过渡来执行此操作。查看更新的小提琴：

http://jsfiddle.net/P7b5T/3/

$(document).ready(function () {
    var $all_listItems = $('.choose-format-block .format-area a');
    $all_listItems.on('click', function () {
        $('.container').addClass('selected');
        $('.format-area.active').removeClass('active');
        $(this).parents('.format-area').addClass('active');
    });
});

CSS：

.container .format-area {
    opacity: 1;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
}

.container.selected .format-area {
    opacity: .3;
}

.container.selected .format-area.active {
    opacity: 1;
}

首先，容器获得“已选择”类，这意味着已选择一个项目。这会将所有项目的不透明度设置为3。然后，将选定的项目设置为活动类，以将不透明度设置回1。

编辑：并且当您想返回到所有未选择的项目时，只需从容器中删除所选的类。

关于jquery - 单击元素使其突出显示，并使其他元素不可见，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25082958/