0

当我们单击符号时，我编写了用于最小化和最大化文本的代码。我尝试了以下方法：

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 中必须显示“instructions”和“[+]”。当我单击“[+]”符号时，它必须最大化 div 并显示所有剩余的文本。此外，[+] 符号必须替换为 [-] 符号，这将最小化文本。

谁能帮我？

4

3 回答 3

1

好的，我认为这个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;
}
于 2012-07-24T16:12:38.000 回答
0

尝试这个：

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);    
});​
于 2012-07-24T16:05:00.923 回答
0

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

要显示的文本也应该首先隐藏

于 2012-07-24T15:53:36.137 回答