Prevent/protect div from .click() function

Question

I'm making simple HTML list with sub div, and I made javascript code with jQuery that opens and closes div under li element, but I don't want to have div closed after clicking on that div. Let me make simple.

$(document).ready(function(){

		$(".submenu-cat ").click(function( event ){
			
			var activeClass = $( this ).hasClass( "active" );
			if(activeClass == true){
				$(this).removeClass('active');
			} else {
				$(this).addClass('active');
			}
			
			$(this).children('.sub-open').slideToggle();
			
		});
});

.tabler .active {
	background: #f79925;
	color:white;
	border-bottom:0;
}
.tabler .active h3 {
	color: white ;
}
.submenu-cat {
	cursor:pointer;
}
.submenu-cat .sub-open {
	display:none;
	background: #eeeded;
}
.tabler {
	padding-left: 10px;
}
.tabler li {
	list-style:none;

}
.tabler .boxined .right_actions {
	float:right;
	
	color:white;
	margin-top:10px;
	opacity:0.8;
}
.tabler .boxined .right_actions div {
	text-align:centeR;
	border-right:solid 1px white;
	float:left;
	padding: 0 10px;
	font-size:12px;
}
.tabler .boxined .right_actions div a {
	color:white;
}
.tabler .boxined {
	border-top:solid 1px lightgrey;
	border-bottom:solid 1px lightgrey;
	height:66px !important;
}
.tabler li .image {
	float:left;
	margin-right: 20px
}
.tabler li:hover {
	background:#f79925;
	color:white;
}
.tabler li:hover h3 {
	color:white;
}
.tabler h3 {
	font-size:17px;
	font-weight:600;
	margin-left:15px;
	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabler ">
	<li class="submenu-cat">
		<div class="boxined">
			<a href="#">
				<div class="image">
					<img src="img/pic1.png" width="64" height="64" />
				</div>
				<h3>my list #1</h3>
			</a>
		</div>
		<div class="sub-open">
			Description
		</div>
	</li>
<ul>

If you run snippet, you'll see that you can close the sub-open div by clicking on it. I don't want that. How can I somehow, prevent that sub-open div from click() function?

Answer 1

try the following, i have added a click handler to .sub-open in this is stop the propagation, now if this is reached then it is finish, no other handler would be called.

$(document).ready(function(){

		$(".submenu-cat ").click(function( event ){
			
			var activeClass = $( this ).hasClass( "active" );
			if(activeClass == true){
				$(this).removeClass('active');
			} else {
				$(this).addClass('active');
			}
			
			$(this).children('.sub-open').slideToggle();
			
		});

        $('.sub-open').click(function(e) {
            e.stopPropagation();
        });
});

.tabler .active {
	background: #f79925;
	color:white;
	border-bottom:0;
}
.tabler .active h3 {
	color: white ;
}
.submenu-cat {
	cursor:pointer;
}
.submenu-cat .sub-open {
	display:none;
	background: #eeeded;
}
.tabler {
	padding-left: 10px;
}
.tabler li {
	list-style:none;

}
.tabler .boxined .right_actions {
	float:right;
	
	color:white;
	margin-top:10px;
	opacity:0.8;
}
.tabler .boxined .right_actions div {
	text-align:centeR;
	border-right:solid 1px white;
	float:left;
	padding: 0 10px;
	font-size:12px;
}
.tabler .boxined .right_actions div a {
	color:white;
}
.tabler .boxined {
	border-top:solid 1px lightgrey;
	border-bottom:solid 1px lightgrey;
	height:66px !important;
}
.tabler li .image {
	float:left;
	margin-right: 20px
}
.tabler li:hover {
	background:#f79925;
	color:white;
}
.tabler li:hover h3 {
	color:white;
}
.tabler h3 {
	font-size:17px;
	font-weight:600;
	margin-left:15px;
	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabler ">
	<li class="submenu-cat">
		<div class="boxined">
			<a href="#">
				<div class="image">
					<img src="img/pic1.png" width="64" height="64" />
				</div>
				<h3>my list #1</h3>
			</a>
		</div>
		<div class="sub-open">
			Description
		</div>
	</li>
<ul>

Answer 2

you can use event.target to check which element the user has clicked

$(".submenu-cat").click(function( event ){
    var $target = $( event.target );
    if($target.hasClass('sub-open')){//user clicked the div

        return;
    }
    var activeClass = $( this ).hasClass( "active" );
    if(activeClass == true){
        $(this).removeClass('active');
    } else {
        $(this).addClass('active');
    }
    $(this).children('.sub-open').slideToggle();
});