我正在尝试制作常见问题解答，并列出了阻止列表和时间 ＆LT;李＆GT;点击它的孩子扩展，再次＆lt;李＆GT;被点击将关闭。一切都很好，但是当我点击它仍然关闭它。
我只想点击盒子时点击它会打开他的孩子＆＃34;显示＆＃34;只有当它再次点击时，它才会隐藏＆＃34;显示＆＃34;
我的jQuery是：
$(".toggle").click(function(){
$(this).find('.reveal').addClass('open').slideToggle();
return false;
});
我是1小时，我搜索了stackflow，有人说使用＆＃34;返回false;＆＃34 ;;但它没有做任何事情。我究竟做错了什么？ 这是盒子列表中的演示： 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>
答案 0 :(得分：0)
因此，不要在li上触发事件，而是尝试在shown上触发它。检查以下代码：
$(".toggle .shown").click(function() {
$(this).parent().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;
z-index: 9999;
}
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;
}
ol li .reveal .btn {
width: 200px;
text-align: center;
line-height: 20px;
height: 40px;
display: inline-block;
}
ol li.email {
text-align: center;
}
ol li.email input {
width: 70%;
padding: 0 10px;
border-color: #F29898;
}
ol li.email button {
width: 20%;
padding: 10px auto;
border: 2px solid #F29898;
background-color: #F29898;
font-size: 15px;
height: 23px;
color: #fff;
font-weight: bolder;
}<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>