Question

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

Answer 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，上面是感觉比较通用的写法

手写的，没有测试

追问

用js可以吗？ 点之前按钮在右边，点完之后右边的没有了在下面。 收回去又在右边那种。谢谢了。o(∩_∩)o 哈哈

追答

js和jquery没多大区别

你在head标签引用下jquery的js就行了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","");//隐藏当前内容
            }
            else
            
            {
                $("#show").attr("id","");//隐藏其他显示内容
                $(".list .box:eq("+i+")").attr("id","show");//显示当前内容
                $(this).hide();//隐藏当前的open按钮
            }
        }
        
    })
    $(".close").click(function(){
        var i=$(".list .close").index($(this));
        $(".list .box:eq("+i+")").attr("id","");//隐藏当前内容
        $(".list .open:eq("+i+")").show();//显示当前的open按钮
    })
})
如果打开和关闭用同一个按钮比较麻烦不如 用2个不同按钮 显示和隐藏就行了

Answer 2

var tag="off";//记录开关状态
function test(obj){
//打开
if(tag=="off"){
obj.style.height="150px";//展开的高度
tag="on";//开关设为打开状态
}else{
obj.style.height="0px";//高度设为0
obj.style.display="none";//隐藏
tag="off";//开关设为关闭
}
}

Answer 3

这个是层的属性和鼠标的单机事件集合即可。属性display(none:隐藏，block：显示)，onclick调用的方法中将对象的display切换即可。

追问

能详细点么？谢谢拉 ;-)

能详细点么？谢谢拉 ;-)