jQuery toggleClass Fonksiyonunun Body’e Tıklayınca da Çalışması

Cevapla

ToggleClass olarak ayarladığımız, class ekleyip çıkardığımız alan dışında body’de herhangi bir yere tıklandığında eklenen (örn: .active) class’ın silinmesini aşağıdaki şekilde yapabiliriz. Click fonksiyonu loopa girmesin diye stopPropagation kullanacağız.

Html

1
2
3
4
5
6
7
8

<!DOCTYPE html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<a href="#" class="activeClass">Click</a>
</body>
</html>

Css

1
2
3

body {width:90%;height:500px}
.activeClass {width:100px;height:45px;padding-top:18px;background-color:red;display:block;color:#FFFFFF;font-weight:bold;text-align:center;text-decoration:none;font-size: 22px;}
.activeClass.active {background-color:blue;}

jQuery

1
2
3
4
5
6
7
8
9
10

$(document).ready(function() {
$('body').click(function(){
$('.activeClass').removeClass('active');
});

$('.activeClass').click(function(e){
e.stopPropagation();
$(this).toggleClass('active');
});
});

Demosu için tıklayın:
http://codepen.io/evrenakar/full/lACnx

Paylaş