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

好的，我認為這個jsFiddle會回答您的問題！

我使用了jQuery UI核心，因為有了它，您可以執行非常酷的動畫，例如使用元素進行填充，並且基本上每個按鈕都需要兩個函數（相信我，這是最好的方法），並且display: none;了一個按鈕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;
}

Answer 2

您可能想使用slideToggle()而不是toggle()

首先，還應隱藏要顯示的文本

Answer 3

嘗試這個：

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);    
});​