新手问题：怎么实现“我开你关效果”

怎么实现点击一个“展开此价格更多航班”然后下面展开内容；然后点下面的“展开此价格更多航班”，开着的全部关掉，打开刚刚点击的这个。这个展开此价格更多航班和下面的内容是循环出来的。数目不定。怎么实现呢？展开的代码我自己写出来了，大家帮忙告诉下，怎么关联点其中一个这个开，其他就关？jquery

解决方案 »

  1.   

    $(".class").slideToggle("slow"); 
    滑动切换 。
      

  2.   

    贴html代码出来，别人才好根据你的代码给解决方案
      

  3.   

    没有用Jquery 说下思路
    每次执行函数的时候用一个变量记住当前打开的对象
    下次执行的时候让上一个打开的div关闭即可(思路很重要哦)
    写个例子
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>NoName</title>
    <style>
    *{padding:0;margin:0;font-size:12px;}
    .testDiv{width:198px;height:100px;border:1px solid #ccc;margin:0 0 5px 5px;display:none;}
    h5{background:#ccc;width:200px;margin:5px 0 0 5px;height:24px;line-height:24px;cursor:pointer;}
    </style>
    <script>
    var lastObj='';
    function ShowMe(obj){
    var ShowObj=document.getElementById(obj);
    ShowObj.style.display=(ShowObj.style.display=='block')?'none':'block';
    if (lastObj!='') lastObj.style.display='none';
    lastObj=ShowObj;
    }
    </script>
    </head><body>
    <h5 onclick="ShowMe('Div1')">模块1</h5>
    <div id="Div1" class="testDiv">
    第一个栏目
    </div>
    <h5 onclick="ShowMe('Div2')">模块2</h5>
    <div id="Div2" class="testDiv">
    第二个栏目
    </div>
    <h5 onclick="ShowMe('Div3')">模块3</h5>
    <div id="Div3" class="testDiv">
    第三个栏目
    </div>
    </body>
    </html>
      

  4.   

    如果Div的ID是有序的话可以这样写
    function show(val)
    {
    for(var i = 1 i < 4; i++)
    {
    if(val == i)
    {
    $("#div" + i).show();
    }
    else
    {
    $("#div" + i).hide();
    }
    }
    }<h5 onclick="ShowMe('2')">模块2</h5>
      

  5.   


    //给所有的增加一个class，比如：class="tip"，然后
    <script>
    $(function(){
       $(".tip").click(function(){
          $(".tip").slideUp(500);
          $(this).slideDown(500);
      })
    })
    </script>
      

  6.   

    自己手写的话，可以用display属性
    <div style="display:none/block">
      ......
      ......
    </div>
    通过改变display的属性值，none为不显示，block块状显示也可以使用插件：jQuery中有现成的，可以去找找
      

  7.   

    我支持楼上的，如果是菜鸟的话，这种方法比较简单使用table布局，然后 设置他的display属性。none为不显示，block块状显示