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