0
我想做一个常见问题，我做一个块列表，当 < li>被点击它的孩子扩展，当再次点击时< li>将关闭。一切工作正常，但当我也点击它仍然关闭它。jQuery不能执行孩子点击功能，但在父母执行功能
我只想被点击框时，点击它会只开了他的孩子“兜底”，当它再次点击，它会隐藏“兜底”
我jQuery是：
$(".toggle").click(function(){
$(this).find('.reveal').addClass('open').slideToggle();
return false;
});
我已经过了1个小时，我搜索了stackflow，还有一个人说用“return false;”;但它什么也没有做。我究竟做错了什么？ 这里是在箱列表中的演示：上li射击事件 demo
$(".toggle").click(function() {
$(this).find('.reveal').addClass('open').slideToggle();
});ol {
display: block;
width: 100%;
height: auto;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(61, 70, 77, 0.1);
}
ol li {
display: block;
width: 100%;
min-height: 80px;
border-bottom: 1px solid #e9eaec
}
ol li .shown {
width: 100%;
position: relative;
}
ol li .shown * {
float: left;
line-height: 80px;
height: 80px;
}
ol li .number {
width: 8%;
position: relative;
float: left;
display: block;
}
ol li .number span {
background-color: #F29898;
display: block;
position: absolute;
line-height: 0px;
border-radius: 50px;
padding: 15px 8px;
font-weight: 800;
color: #fff;
font-size: 21px;
top: 25px;
left: -15px;
height: 30px;
width: 30px;
display: block;
}
ol li .name {
width: 52%;
line-height: 80px;
height: 80px;
float: left;
}
.detailed ol li .name {
margin-left: 10%;
}
ol li .name span {
font-size: 26px;
font-weight: 800;
color: #F29898;
}
ol li .rating {
width: 20%;
}
ol li .rating span {
font-size: 18px;
font-weight: 800;
color: #F29898;
opacity: .8;
}
ol li .goto {
width: 20%;
}
ol li .goto .btn {
line-height: 40px;
height: 40px;
text-align: center;
padding: 0 24px;
margin-top: 20px;
}
ol li .reveal {
display: none;
width: 90%;
margin: 0 auto;
padding: 0 0 20px 0;
position: relative;
line-height: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
<li class="toggle">
<div class="shown">
<div class="number">
<span>4</span>
</div>
<div class="name">
<span>GoDaddy</span>
</div>
<div class="rating">
<span>8.5/10</span>
</div>
<div class="goto">
<a class="btn">Visit</a>
</div>
</div>
<div class="reveal" id="four-reveal">
<p>We personally love GoDaddy but <u>their are many mix reviews about the company hosting services</u>. Some love them, some don't. But GoDaddy doesn't get so big by accident, they have more than 14 million customers. We personally host our clients
websites on GoDaddy;</p>
<p>GoDaddy shared hosting plan offers <b>uptime of 99.9% guarantee</b>, with <b>24/7 support via phone and email or Fourm</b>; and We can tell you one thing sure, their <b>Support is the best</b>. </p>
</div>
</li>
</ol>
请在这里创建工作的代码示例。 –
@Dinesh我添加了工作代码 – Dishu