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核心，因为有了它你就可以用你的元素做很酷的动画，基本上你需要为每个按钮提供两个函数（相信我这是最好的方法）并给出了一个按钮{{1所以当它切换[ - ]和[+]改变你想要的地方时。

所以js部分：

display: none;

html部分：

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

和css部分：

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

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

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

3 个答案: