Question

我已经将这个http://jsfiddle.net/greggb/Gfw2n/ div切换脚本按照我想要的方式工作了。

我正在尝试在open div中获得一个关闭按钮，但是不知道有多少jquery可以解决这个问题。

对此的任何帮助都会很棒。

谢谢，Gregg。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>



<style>

.action {
    cursor: pointer;
    width: 100px;
    padding: 20px;
    background: #cccccc;
    display: inline-block;
    margin: 10px 5px 0px 5px;
}

.content{
    display:none;
    width:60%;
    padding:100px;
    background-color: red;
}

.content1{
    display:none;
    width:60%;
    padding:100px;
    background-color: green;
}

.content2{
    display:none;
    width:60%;
    padding:100px;
    background-color: blue;
}

</style>


</head>

<body>





<div class="content" id="bottomContent">
    Content
</div>

<div class="content1" id="bottomContent1">
    Content 1
</div>

<div class="content2" id="bottomContent2">
    Content 2
</div>



<div class="action" data-content="#bottomContent" >
    Click
</div>

<div class="action" data-content="#bottomContent1">
    Click 1
</div>

<div class="action" data-content="#bottomContent2">
    Click 2
</div>



<script>

    $("div.action").click (function(){
        var $this = $(this);
        var target = $this.data('content');
        $('div.action').not($this).each(function(){
           var $other = $(this);
           var otherTarget = $other.data('content');
           $(otherTarget).hide();        
        });

        $(target).fadeIn({height: "toggle"}, 1000);

    });

</script>


</body>
</html>

Answer 1

你可以尝试这个（在div的最右上方添加一个x来关闭它）

$("div.action").click (function(){
    var $this = $(this);
    var target = $this.data('content');
    $('div.action').not($this).each(function(){
        var $other = $(this);
        var otherTarget = $other.data('content');
        $(otherTarget).hide();        
    });
    var cls=$('<div/>', {
       'style':'right:10px;top:15px;width:12px;height:18px;cursor:pointer;padding:2px;position:absolute;border:solid gray 1px;',
       'id':'cls',
       'text':'x',
       'title':'Close',
       'click':function(){
            var t=$(this);
            t.parent().fadeOut('madium', function(){
                t.remove();
            });
        }
    });
    $(target).prepend(cls).fadeIn({height: "toggle"}, 1000);
});

DEMO

Div切换关闭按钮

1 个答案: