Как на jquery реализовать обесцвечивание и возврат цвета для блоков аккордеона bootstrap

294

08 июня 2017, 07:15

при нажатии на каждый блок - раскрывается скрытый блок - и все соседние цветные блоки сереют. при повторном нажатии цвет возвращается если при раскрытом одном блоке нажать на другой - цвет должен перейти на него - как активный. а серый цвет всех остальных сохраняться

Answer 1

В css3 есть фильтр grayscale и оно делает то что вы хотите. Вот простой пример на css3 и jQuery. При клике на img всех кроме текущей добавил определенный класс. И по этому классу добавил стили для grayscale.

$(document).ready(function(){ 
  $('img').on('click', function(event){ 
    $('img').addClass('grayscale'); 
    $(this).removeClass('grayscale'); 
    event.stopPropagation(); 
  }); 
  $('body').on('click', function(){ 
    $('img').removeClass('grayscale'); 
  }); 
});

img{ 
  max-width: 100px; 
  height: auto; 
} 
.grayscale {  
  -webkit-filter: grayscale(100%); 
  -moz-filter: grayscale(100%); 
  -ms-filter: grayscale(100%); 
  -o-filter: grayscale(100%); 
  filter: grayscale(100%); 
  filter: url(grayscale.svg#greyscale); /* Firefox 4+ */ 
  filter: gray; /* IE 6-9 */ 
  -webkit-filter: grayscale(1); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<img src="http://4.bp.blogspot.com/-uVpL-stvY3A/VOjA8Pblu3I/AAAAAAAACgw/KLIKxsNbo3Y/s1600/Google%2BDomains.png"> 
<img src="http://cdn1.qcs.co.uk/wp-content/uploads/2014/10/A-pat-on-the-back.jpg"> 
<img src="http://static.wixstatic.com/media/6d4904_3e7a9d31cb9c49a0af1c48f0f378e99f.jpg_256"> 
<img src="https://www.extension.umn.edu/food/small-farms/img/main.jpg">