使用javascript最小化和最大化文本

Question

我編寫了用於最小化和最大化文本的代碼，當我們單擊符號時。我曾嘗試以下：

HTML代碼：

<div style="font:12px verdana;background:#fefcd9;padding:10px 10px 10px 10px;border:solid 1px lightgray;" id="text"> 
Instructions<span id="min" style="cursor:pointer;float:right;">[+]</span><span id="max" style="cursor:pointer;float:right;">[-]</span><br/><br/> 
Perhaps you should look for someone who will dig deep to learn about you, your business, your services and products. A writer who will put herself in the shoes of your potential customers in order to answer these important questions:hhhhhhhh 
</div> 

的javascript：

<script type="text/javascript"> 
$('#text').click(function(){ 
$("#min").toggle(200); 
    $("#max").toggle(200); 
}); 
</script> 

在第一個div上述具有顯示出 「指令」 和 「[+]」。當我點擊「[+]」符號時，它必須最大化div並顯示所有剩餘的文本。此外，[+]符號必須替換爲[ - ]符號，這將使文本最小化。

任何人都可以幫助我嗎？

Answer 1

你可能想使用slideToggle()不toggle()

的文本顯示也應在第一

Answer 2

隱藏試試這個：

http://jsfiddle.net/VvkSZ/

HTML：

<div style="font:12px verdana;background:#fefcd9;padding:10px 10px 10px 10px;border:solid 1px lightgray;" >Instructions 
    <span id="min" style="cursor:pointer;float:right;">[-]</span> 
    <br/><br/> 
    <div id="text"> 
Perhaps you should look for someone who will dig deep to learn about you, your business, your services and products. A writer who will put herself in the shoes of your potential customers in order to answer these important questions:hhhhhhhh 
    </div> 
</div>​ 

JS：

$('#min').click(function(){ 
$("#text").toggle(200);  
});​ 

Answer 3

好的我認爲這個jsFiddle會回答你的問題！

我使用jQuery UI核心，因爲使用它你可以做非常酷的動畫，像你的元素的東西，基本上你需要兩個函數爲每個按鈕（相信我這是最好的方式），並給了其中一個按鈕display: none;所以當它切換像你想要的[ - ]和[+]改變的地方。

所以JS部分：

$(".tr").click(function() { 
    $(".bc").toggle("blind"); 
    $(".tr").find("span").toggle(); 
}); 

HTML部分：

<div class="container clearfix" id="text"> 
    <div class="tl">Instructions</div><div class="tr"><span class="min-button">[-]</span><span class="max-button" style="display: none;">[+]</span><br/><br/></div> 
    <div class="bc"> 
     Perhaps you should look for someone who will dig deep to learn about you, your business, your services and products. A writer who will put herself in the shoes of your potential customers in order to answer these important questions:hhhhhhhh</div> 
</div> 

而CSS部分：

.container{ 
    margin-top: 40px; 
    font:12px verdana; 
    background:#fefcd9; 
    padding:10px 10px 10px 10px; 
    border:solid 1px lightgray; 
    width: 400px; 
} 

.container .tl{ 
    position: relative; 
    float: left; 
} 

.container .tr{ 
    position: relative; 
    float: right; 
} 

.tr .min-button{ 
    cursor:pointer; 
    float:left; 
} 

.tr .max-button{ 
    cursor:pointer; 
    float:left; 
} 

.container .bc{ 
    position: relative; 
    display: inline-block; 
    float: right; 
} 

.clearfix:after 
{ 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
.clearfix 
{ 
    display: inline-block; 
}