我有问题切换文本内容..主要是我有三个部分应该切换内容“上下”。如果我单击文本显示在div上的img按钮而不是将其按下来的问题。
这是我的HTML
<div class="toggle-content expand-one">
<img src="Images/icon.png" class="image" alt="" id="img-01" />
<ul class="crp-list" style="display: block;display:none">
<li class="content-one comments">
content test here
</li>
<input class="buttonStyle" type="button" value="BOOK NOW"/>
</ul>
</div>
<div class="toggle-content expand-one">
<img src="Images/icon.png" class="image" alt="" id="img-02" />
<ul class="crp-list" style="display: block;display:none">
<li class="content-one comments">
content test here
</li>
<input class="buttonStyle" type="button" value="BOOK NOW"/>
</ul>
</div>
<div class="toggle-content expand-one">
<img src="Images/icon.png" class="image" alt="" id="img-01" />
<ul class="crp-list" style="display: block;display:none">
<li class="content-one comments">
content test here
</li>
<input class="buttonStyle" type="button" value="BOOK NOW"/>
</ul>
</div>
JQuery代码:
$(".image").click(function () {
var crp_list = $(this).next(".crp-list");
$(crp_list).toggle();
});
可能是问题,因为我使用的是ul而不是div?我还尝试在css部分中包含display:none但我没有工作..
这是我的CSS代码:
.crp-list
{
width: 98%;
border: 1px solid #CCCCCC;
padding: 5px;
list-style: none;
top: 52px;
margin-bottom:50px;
}
.crp-list li
{
padding: 5px;
line-height: 25px;
font-size: 13px;
font-weight:bold;
color: #008080;
width:100%;
text-decoration:none;
}
我要设计代码吗?或用div替换ul?请问有人帮我吗?