使用jquery切换单个div

时间:2010-11-09 23:47:43

标签: javascript jquery toggle

我正在尝试使用+和 - 框创建一个切换效果来显示和隐藏div。例如http://theodin.co.uk/tools/tutorials/jqueryTutorial/index.html

这是我正在使用的脚本

$(function(){
        $('.block').hide();
            $('#show').toggle(function(){
                    $('.block').show(); 
                    $(this).attr("src","images/minus.jpg" );
            },function(){
                $('.block').hide(); 
                $(this).attr("src", "images/plus.jpg" );
            });
    });

HTML

<div id="show"> Open <img id="show" src="images/plus.jpg"/> </div>
    <div class="block"> 
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </div>  

它与一个div工作正常,但我有多个,当我点击一个,他们都显示。有没有办法使用我的代码单独切换它们?

2 个答案:

答案 0 :(得分:1)

您正在更改src元素的#show,当您应该在其子<img>上更改它时。

$(function() {
    $('.block').hide();
    $('#show').toggle(function(){
         $('.block').show(); 
         $(this).children('img').attr("src","images/minus.jpg" );
    },function(){
         $('.block').hide(); 
         $(this).children('img').attr("src", "images/plus.jpg" );
    });
});

这使用.children()获取子<img>元素,以便您可以更改其来源。

此外,<img>与其父级具有相同的ID。这是不允许的。 ID必须是唯一的。

答案 1 :(得分:1)

show ID更改为class,如下所示:

<div class="show"> Open <img src="images/plus.jpg" /> </div>
<div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>  

<div class="show"> Open <img src="images/plus.jpg" /> </div>
<div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>  

然后jQuery成为:

$('.show').toggle(function(){
  $(this).next('.block').show(); 
  $(this).children("img").attr("src","images/minus.jpg" );
},function(){
  $(this).next('.block').hide(); 
  $(this).children("img").attr("src", "images/plus.jpg" );
});

Here's an example.