Question

我正在尝试学习如何使用jquery / animation并且卡住了。当我点击＃menu1时，切换显示向上，但是当我点击＃menu2时它只覆盖＃menu1。

我的目标是让＃menu2切换，同时＃menu1 dissapear，而不只是覆盖它。

感谢社区的指导。

private static class ViewHolder {
    private TextView tv_Title, tv_Price, tv_SellingPrice,
            tv_ShippingCharge, tv_TotalPrice;
    private ImageView iv_Cancel, iv_ProductImage;
}

Answer 1

      <style>
      *{ margin:0; padding:0; box-sizing:border-box; list-style:none; outline:none; text-decoration:none;}
      .accordion { width:500px; margin:15px 0 0 15px; background:#000; color:#fff; padding-right:10px;}
      .accordion ul li { border:1px solid #fff; margin-bottom:10px; padding:2px;}
      .accordion ul li a { color:#fff; display:block; }
      .accordion ul { padding:10px 0 10px 10px;}
      .accordion ul li ul { display:none;border-top:1px dotted #fff;}

      </style>


    <div class="accordion">
    <ul>
    <li>
    <a href="#">1</a>
      <ul>
      <li>1.1</li>
      <li>1.2</li>
      <li>1.3</li>
      </ul>
    </li>

    <li>
    <a href="#">2</a>
      <ul>
      <li>2.1</li>
      <li>2.2</li>
      <li>2.3</li>
      </ul>
    </li>


    <li>
    <a href="#">3</a>
      <ul>
      <li>3.1</li>
      <li>3.2</li>
      <li>3.3</li>
      </ul>
    </li>


    </ul>

    </div>


    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>
    $(document).ready(function() {

    $('.accordion li a').click(function(e){
    if($(this).hasClass('clicked')){                 // check if current list is already open
    $(this).removeClass('clicked').next('ul').slideUp(500); // If yes then closes the current list
    }
    else{
    $('.accordion li a').removeClass('clicked').next('ul').slideUp(500);  // Remove the Clicked class from all anchors and Slide Up All ULs
    $(this).addClass('clicked').next('ul').slideDown(500);  // add clicked class to clicked anchor and slide Down its next UL
    }
    })

    });

    </script>

Jquery多个切换

1 个答案: