0

私はテスト Web サイト (html + css を学んでいます) に取り組んでいますが、何かについてあなたの助けが必要です。

テキスト付きの 3 つの div (それぞれ幅 50%) があり、すべての div の左上隅に「+」記号の付いた画像が必要です。ユーザーがクリックすると、記号 + が - に変わり、div の幅が変わります (その 1 つの div のみ)。

良い例はここにあります: http://i39.tinypic.com/9va7pz.png (ただし、「-」記号も必要です)

誰かがそれを行う方法を教えてもらえますか? 私はJS（初心者）にはチャンスがありません。

もちろんアニメ化できれば（幅の変更だけでなく）

（下手な英語でごめんなさい - 私が何を望んでいるのか理解してくれることを願っています）

4

3 に答える 3

0

私が理解しているように、あなたのHTMLはこのようなものでなければなりません 

<div><span class='changeSign'>+</span>some text here</div>
<div><span class='changeSign'>+</span>some text here</div>
<div><span class='changeSign'>+</span>some text here</div>

次に、 position:relative を使用して配置できます

あなたのjQueryはこのようになります

$(document).ready(function(){
   $('span.changeSign').click(function(){
if ($(this).text() == '+'){
$(this).parent('div').css('width','100%');
    $(this).text('-');
}     else {
$(this).parent('div').css('width','50%');
    $(this).text('+');
}    

   });
});

ウォーキングの例 - http://jsfiddle.net/ncXvM/

于 2013-11-02T15:02:53.513 に答える
0 
    html:

        <div id='symbol'>+</div> // the "+" symbol, you'd like to click, you can change the + to a image.
        <div id='d1'></div>
        <div id='d2'></div>
        <div id='d3'></div>

js(with jquery):
    $('#symbol').click(function(){
       $(this).attr('id', 'sub')
       $(this).text('-') //if it's image, change the image
       $('#d1').css('width', '100%')
    });

   $('#sub').click(function(){
  $(this).attr('id', 'symbol')
       $(this).text('+') //if it's image, change back to "+" image
       $('#d1').css('width', '50%')
});
于 2013-11-02T14:57:31.040 に答える
0

を単純に折りたたんで展開するだけの場合は<div>、これで十分だと思います。

HTML:

<div class="collapse"><a>+</a><p>Some text...</p></div>

jQuery:

$('a').click(function(){
    if($(this).parent('div').attr('class') == 'collapse'){
        $(this).text('-')//if it's an image, replace it via .attr('src', 'url');
        .parent('div').width('100%').attr('class','expand')
    }else {
        $(this).text('+').parent('div').width('50%').attr('class','collapse')
    }   
});

いくつかのアニメーションを追加したい場合は、CSStransitionを<div> 

div { transition: width 0.5s linear;}

またはjQueryで.animate()

.animate({width:'100%'},500);
于 2013-11-02T15:54:20.720 に答える