javascript - 如何使用 jQuery 将 div 宽度从 50% 更改为 100% 并返回

Question

我正在开发测试网站（我正在学习 html+css），现在我需要您的帮助。

我有 3 个带有文本的 div（每个宽度为 50%），并且在每个 div 的左上角我想要带有“+”符号的图像。当用户单击时，符号 + 将自行更改为 - 和 div 的宽度（仅针对那个 div）。

很好的例子在图片上：http: //i39.tinypic.com/9va7pz.png（但我也想要“-”符号）

有人可以告诉我怎么做吗？我没有机会使用 JS（新手）。

当然，如果可以对其进行动画处理（不仅可以更改宽度）

（抱歉英语不好-希望你能理解我想要的）

Answer 1

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

Answer 2

据我了解，您的 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>

然后你可以将你的 with 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('+');
}    

   });
});

wodking 示例 - http://jsfiddle.net/ncXvM/

Answer 3

如果您只想简单地折叠-展开<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')
    }   
});

如果您想添加一些动画，只需将 CSS 添加transition到您的<div>

div { transition: width 0.5s linear;}

或使用 jQuery.animate()

.animate({width:'100%'},500);