我正在尝试使用 + 和 - 框创建切换效果以显示和隐藏 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 上工作正常,但我有多个,当我单击一个时,它们都会显示。有没有办法使用我拥有的代码单独切换它们?
最佳答案
将 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" );
});
关于javascript - 在单个 div 上使用 jquery 切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4139920/