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 に「指示」と「[+]」を表示する必要があります。「[+]」記号をクリックすると、div を最大化し、残りのすべてのテキストを表示する必要があります。また、[+] 記号を [-] 記号に置き換える必要があります。これにより、テキストが最小化されます。

誰でも私を助けることができますか？

4

3 に答える 3

1

わかりました、このjsFiddleがあなたの質問に答えると思います!

jQuery UI コアを使用したのは、それを使用すると、要素を使用したような非常にクールなアニメーションを実行できるためです。基本的に、各ボタンに 2 つの関数が必要であり (これが最善の方法だと信じてください)、ボタンの 1 つを与えた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 に答える