How to stop propagating event from parent div to child div
Check target for match clicked object. Try this code in beginning of click event handler.
if( event.target !== this ) {
return;
}
//...do stuff..
you need to stop propagating in child,not parent so you should write this:
$('.listed-category').click(function(event){
event.stopPropagation();
});
and if you want to click a tag and stop propagation too,you also need to write this:
$('a#close').click(function(event){
event.stopPropagation();
});
Anyways I will suggest Yuriy's answer. I just want you to know that you should put event.stopPropagation() in childrens(if you don't want event of parent is run),instead of parent.
http://codepen.io/rakeshcode/pen/KrZdNo
$(document).ready(function(){
$(".arrow").click(function(){
$(".row").slideToggle();
});
$(".btn").click(function(event){
event.stopPropagation();
//$(".btn").attr("href","www.yahoo.com")
});
}).btn {
display: block;
padding:15px;
background-color:green;
width:100px;
margin-top:15px;
text-decoration:none;
margin-left:auto;
margin-right:auto;
}
.arrow {
cursor:pointer;
text-align: center;
padding:10px 0;
font-size:15px;
font-weight:bold;
background-color:grey;
margin-top:15px;
}
.container {
max-width:600px;
margin-left:auto;
margin-right:auto;
}
.close {
height:75px;
overflow:hidden;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.open {
height:215px;
overflow: hidden;
transition-property:height;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
transition-timing-function: ease-in;
}
.up {
background-color:red;
}
.down {
background-color:green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="arrow"> Click here Click here<a class="btn" href="www.google.com" target="_blank">click here</a></div>
<div class="wrap">
<div class="row">The most effective plac elearning,’ they most likely don’t know this themselves.Well, the most effective place to start is to dig into what the person asking for this training, ACTUALLY needs. Because if they’re dumping a huge stack of content on your desk and giving you vague instructions to ‘turn it into elearning,’ they most likely don’t know this themselves.Well, the most effective place to start is to dig into what the person asking for this training.ACTUALLY needs. Because if they’re dumping a huge stack of content on your desk and giving you vague instructions to ‘turn it into elearning,’ they most likely don’t know this themselves.Well, the most effective place to start is to dig into what the person asking for this trainingACTUALLY needs. Because if they’re dumping a huge stack of content on your desk and giving you vague instructions to ‘turn it into elearning,’ they most likely don’t know this themselves.Well, the most effective place to start is to dig into what the person asking for this training</div>
</div>
</div>