求js代码，点击展开，点击关闭。

JavaScript017

求js代码，点击展开，点击关闭。,第1张

假如html代码如下

<div class="list">

    <h1><a class="open">点击展开</a></h1>

    <div class="box">

        <p>----------</p>

        <a class="close">点击关闭</a>

    </div>

</div>

jquery代码：

$(function(){

    $(".open").click(function(){

        var i=$(".list .open").index($(this))//获取点击open在页面中open类的序列

        if($("#show").length>0)//判断是否存在显示元素id show

        {

           if($(".list .box:eq("+i+")").attr("id")!="show")//判断当前的box是否已显示

           {

                $("#show").attr("id","")

            }

        }

        $(".list .box:eq("+i+")").attr("id","show")

    })

    $(".close").click(function(){

        var i=$(".list .close").index($(this))

        $(".list .box:eq("+i+")").attr("id","")

    })

})

这样对应的css类似如下

.box{display:none}

#show{display:block}

.box默认隐藏 被附加id为show后就显示

因为你的列表内容应该是数据绑定生成的，可以定义相同class，上面是感觉比较通用的写法

手写的，没有测试

<script>

jQuery(function(){

  $(".flip").click(function(){$(".panel").slideToggle("slow")})

})

</script>

<div class="flip">点击这里，隐藏/显示面板</div>

<div class="panel" style="display: none">

<p>一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。</p>

<p>在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。</p>

</div>