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

使用document.ready()代替window.load()

您可以更好地简化代码。

试试这个：

$(document).ready(function () {
    $('.close-x').click(function () {
        e.preventDefault();
        $('.box').slideToggle();
    });
});

<强> JSFiddle Demo

Answer 2

首先，你的小提琴缺少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

Answer 3

$(window).load(function(){
  $('.close-x').click(function(e){
     e.preventDefault();
     var div =$('div.box').slideToggle(); 
  });
});

Answer 4

您的代码没有任何问题，只需要进行少量调整。

你只需要在小提琴中加入jquery
小提琴JavaScript窗口中的任何代码，该代码都会复制到window.load内，但如果您不在小提琴中，请务必在window.load或{{}}内添加您的代码{1}}。

document.ready

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

4 个答案: