javascript - 单击链接图像以关闭/隐藏 div

Question

这就是我目前所拥有的。我尝试了不同的解决方案，但我遗漏了一些东西。 :(

这是我的 html:

<div class="container"><a class="close-x" href="#">
    <img src="x-close.png" alt="x-close" width="30" height="30" /></a>
<div class="box">Content goes here</div></div>`

这是我的CSS:

.container {
    width: 333px;
    display: block;
    position: fixed;
    top: 30%;
    left: 0;
}
.box {
    background: rgba(255, 255, 255, 0.8);
}
a.close-x {
    position: absolute;
    top:-15px;
    right:-15px;
}

这是我对脚本的尝试

http://jsfiddle.net/shanamiami/T6hE9/

Answer 1

首先，您的 fiddle 缺少 jquery 库。

其次，使用文档就绪事件代替窗口加载。

这里是你如何做到的:

    $(function () { // short way of writing document.ready
    $('div.container a.close-x').click(function (e) {

        e.preventDefault();
        var div = $(this).next('.box').slideToggle();
    });

});

FIDDLE