Div切換關閉按鈕

我有這個http://jsfiddle.net/greggb/Gfw2n/ div切換腳本的工作方式，我希望它除了一件事情。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>

來源

2012-10-27 Gregg Bunce

你可以試試這個（加入x到div的頂部最右側將其關閉）

$("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。

來源

2012-10-27 17:59:12

太棒了！那就是我所追求的。謝謝！ –

@GreggBunce，很高興知道:-) –

Div切換關閉按鈕

回答

相關問題