使用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; 
}