切换不起作用

时间:2014-05-05 16:05:48

标签: jquery css toggle

我有问题切换文本内容..主要是我有三个部分应该切换内容“上下”。如果我单击文本显示在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?请问有人帮我吗?

0 个答案:

没有答案