求html代码，点击按钮弹出层，再次点击关闭层？

答案:2 悬赏:80 手机版

解决时间 2021-11-28 11:56

提问者网友：兔牙战士
2021-11-27 20:45

最佳答案

五星知识达人网友：轮獄道
2021-11-27 22:15

首先你要写好两条CSS，用以切换控制按钮样式（以下代码中省略宽高等声明）：
.button {background:url(images/1.jpg) center no-repeat;}
.button-hover {background-image:url(images/2.jpg);} 然后用JS来控制属性：

var oBtn = document.getElementById('btn'); // 假设按钮的id为btn
var oDiv = document.getElementById('div'); // 假设弹出层的id为div
// 鼠标悬停
oBtn.onmouseover = function() {
    oBtn.className = 'button button-hover';
}
// 鼠标移出
oBtn.onmouseout = function() {
    oBtn.className = 'button';
}
// 点击按钮
oBtn.onclick = function() {
    if (oDiv.style.display == 'none') { // 如果层是隐藏的
        oDiv.style.display = 'block';
        oBtn.className = 'button button-hover';
    } else { // 如果层是显示的
        oDiv.style.display = 'none';
        oBtn.className = 'button';
    }
}用jQuery的话代码如下：

var oBtn = $('#btn');
var oDiv = $('#div');
oBtn.hover(function() {
        $(this).addClass('button-hover');
    }, function(){
        $(this).removeClass('button-hover');
}).click(function() {
    if (oDiv.is(':hidden')) {
        oDiv.show();
        $(this).addClass('button-hover');
    } else {
        oDiv.hide();
        $(this).removeClass('button-hover');
    }
});

全部回答

1楼网友：一秋
2021-11-27 22:34

需要用JS写追问有具体的代码吗？？

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息