从.click（）函数中防止/保护div

Question

我正在使用sub div创建简单的HTML列表，并使用jQuery创建javascript代码，在div元素下打开和关闭li，但我不想拥有点击div后，div已关闭。让我简单一点。

＆＃13;

＆＃13;

$(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();
			
		});
});

＆＃13;

.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;
	
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如果您运行代码段，则会看到您可以通过单击关闭sub-open div。我不想要那个。我怎么能以某种方式阻止来自sub-open函数的click() div？

Answer 1

您可以使用event.target来检查用户点击了哪个元素

$(".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();
});

Answer 2

尝试以下操作，我已经向.sub-open添加了一个点击处理程序，这就是停止传播，现在如果达到这个就完成了，就不会调用其他处理程序。

＆＃13;

＆＃13;

$(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();
        });
});

＆＃13;

.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;
	
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;