jQuery скрытая функция зависания для функции щелчка - переключатель?

Question

У меня есть функция зависания (наложение), которая работает, но я бы предпочел, чтобы она работала при нажатии. При повторном нажатии на него будет возвращено значение по умолчанию. Затем нажмите другой элемент для того же эффекта. Пытался получить его, но имел проблемы. Может ли быть подходящим здесь?

jQuery(document).ready(function($) { 
    $('.trigger .orange-cell, .trigger .green-cell, .trigger .purple-cell, .trigger .white-cell, .trigger2 .orange-cell2, .trigger2 .green-cell2, .trigger2 .purple-cell2, .trigger2 .white-cell2').hover(function() { 
     var colorClass = $(this).attr('class').split(' ')[1]; 
     $("."+colorClass).addClass('z-relative'); 
     $('#darkness').fadeTo(200, 1); 
    },function() {var colorClass = $(this).attr('class').split(' ')[1];; 
     $("."+colorClass).removeClass('z-relative'); 
     $('#darkness').fadeTo(200, 0, function(){ 
      $(this).hide(); 
     }); 
    }); 
}); 

http://codepen.io/Kerrys7777/pen/LkaYOW

Answer 1

var check = true; 
 
$(document).ready(function() { 
 
    $('.cell').click(function() { 
 
    console.log(check) 
 
    if (check == true) { 
 
     var colorClass = $(this).attr('class').split(' ')[1]; 
 
     $("." + colorClass).addClass('z-relative'); 
 
     $('#darkness').fadeTo(200, 1); 
 
     check = false; 
 
    } else { 
 
     var colorClass = $(this).attr('class').split(' ')[1];; 
 
     $("." + colorClass).removeClass('z-relative'); 
 
     $('#darkness').fadeTo(200, 0, function() { 
 
     $(this).hide(); 
 
     }); 
 
     check = true; 
 
    } 
 

 
    }); 
 
});

h1 { 
 
    font-size: 46px; 
 
} 
 
ul { 
 
    width: 20%; 
 
    display: inline-block; 
 
    vertical: top; 
 
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) 
 
} 
 
ul li { 
 
    background: #fff; 
 
    list-style: none; 
 
} 
 
body { 
 
    background-color: wheat; 
 
    font-family: Georgia, Constantia, "Lucida Bright", "DejaVu Serif", serif; 
 
} 
 
#darkness { 
 
    background: rgba(0, 0, 0, 0.8); 
 
    display: none; 
 
    height: 150%; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: 5; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    -webkit-transform-style: preserve-3d; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
} 
 
.z-relative { 
 
    position: relative; 
 
    z-index: 10; 
 
    -ms-transform: scale(1.05); 
 
    /* IE 9 */ 
 
    -webkit-transform: scale(1.05); 
 
    /* Safari */ 
 
    transform: scale(1.05); 
 
    /* Standard syntax */ 
 
} 
 
.cell { 
 
    padding: 15px; 
 
    -webkit-transition: all 400ms ease-in-out; 
 
    transition: all 400ms ease-in-out; 
 
} 
 
/*ul li:nth-child()*/ 
 

 
.orange-cell, 
 
.orange-cell2 { 
 
    background: #ffc000; 
 
} 
 
.green-cell, 
 
.green-cell2 { 
 
    background: #92d050; 
 
} 
 
.purple-cell, 
 
.purple-cell2 { 
 
    background: #b3a2c7; 
 
} 
 
.white-cell, 
 
.white-cell2 { 
 
    background: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>DAY 1</h1> 
 
<div id="darkness"></div> 
 
<ul class="trigger"> 
 
    <li class="cell orange-cell">Home</li> 
 
    <li class="cell green-cell">About</li> 
 
    <li class="cell purple-cell">Contact</li> 
 
    <li class="cell white-cell">Num</li> 
 
</ul> 
 

 

 
<ul> 
 
    <li class="cell orange-cell">Home</li> 
 
    <li class="cell green-cell">About</li> 
 
    <li class="cell purple-cell">Contact</li> 
 
    <li class="cell white-cell">Num</li> 
 
</ul> 
 

 
<ul> 
 
    <li class="cell orange-cell">Home</li> 
 
    <li class="cell green-cell">About</li> 
 
    <li class="cell purple-cell">Contact</li> 
 
    <li class="cell white-cell">Num</li> 
 
</ul> 
 
<br> 
 
<br> 
 
<hr> 
 
<br> 
 
<br> 
 
<h1>DAY 2</h1> 
 
<ul class="trigger2"> 
 
    <li class="cell orange-cell2">HOVER ME</li> 
 
    <li class="cell green-cell2">HOVER ME</li> 
 
    <li class="cell purple-cell2">HOVER ME</li> 
 
    <li class="cell white-cell2">HOVER ME</li> 
 
</ul> 
 

 

 
<ul> 
 
    <li class="cell orange-cell2 white-cell2" style="background:#ffc000;">Home</li> 
 
    <li class="cell green-cell2">About</li> 
 
    <li class="cell purple-cell2" style="background:#b3a2c7;">Contact</li> 
 
    <li class="cell white-cell2" style="background:#FFF;">Num</li> 
 
</ul> 
 

 
<ul class="trigger2"> 
 
    <li class="cell purple-cell2 orange-cell2" style="background:#ffc000;">Home</li> 
 
    <li class="cell purple-cell2 green-cell2" style="background:#92d050;">About</li> 
 
    <li class="cell purple-cell2 white-cell2" style="background:#b3a2c7;">Contact</li> 
 
    <li class="cell purple-cell2 white-cell2" style="background:#FFF;">Num</li> 
 
</ul> 
 

 
<ul class="trigger2"> 
 
    <li class="cell orange-cell2">Home</li> 
 
    <li class="cell green-cell2">About</li> 
 
    <li class="cell purple-cell2">Contact</li> 
 
    <li class="cell white-cell2 purple-cell2" style="background:#FFF;">Num</li> 
 
</ul> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br>

ли это так. Проверьте, действительно ли шоу на ложном удалении.