Div 切换关闭按钮答案

【问题标题】：Div Toggle Close buttonDiv 切换关闭按钮
【发布时间】：2012-10-27 17:05:36
【问题描述】：

除了一件事之外，我已经让这个http://jsfiddle.net/greggb/Gfw2n/ div 切换脚本按照我想要的方式工作。

我试图在打开的 div 中获得一个关闭按钮，但不知道足够的 jquery 来解决如何做到这一点。

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

谢谢，格雷格。

<!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>

【问题讨论】：

标签： jquery html toggle slidetoggle

【解决方案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.

【讨论】：

太棒了！这正是我所追求的。谢谢！
@GreggBunce，很高兴知道这一点:-)