Question

使用jQuery，当用户点击“加号”符号时，我会滑动内容并将“加号”替换为“减号”并滑动内容。

但是以一种非常麻烦的方式！

这是我的HTML

<div class="a">
<a href="#" id="toggle" class="show_hide">
    <img src="../plus.png" />
</a>

<div class="block-a" style="display: none">
Some that belongs to the belongs to block A
</div>
</div>

<br /><br />    

<div class="b">
<a href="#" id="toggle" class="show_hide">
    <img src="../plus.png" />
</a>

<div class="block-b" style="display: none">
Some that belongs to the belongs to block B
</div>    
</div>

这是我的jQuery

$(document).ready(function(){

   $('.a .show_hide').toggle(function(){
       $(".a #toggle").find('img').attr('src', '../minus.png' );
       $(".a .block-a").slideDown();

   },function(){
       $(".a #toggle").find('img').attr('src', '../plus.png' );
       $(".a .block-a").slideUp();
   });

    $('.b .show_hide').toggle(function(){
       $(".b #toggle").find('img').attr('src', '../minus.png' );
       $(".b .block-b").slideDown();

   },function(){
       $(".b #toggle").find('img').attr('src', '../plus.png' );
       $(".b .block-b").slideUp();
   });

});

如何停止重复自己？必须有一个更简洁的方法来slideUp和slideDown内容。这是fiddle

提前感谢！

干杯，威尔

Answer 1

有很多解决方案。

一个在this fiddle

我的解决方案是在切换中添加一个引用，以显示/隐藏

<a href="#" class="show_hide" data-content='block-a'>

然后在javascript中使用该值

$('.' + $(this).attr('data-content')).slideDown();

偏离主题：您不应对2个元素使用相同的ID，它必须是唯一的。我已经摆脱了我的例子中的id

Answer 2

选中 Fiddle Demo ，

$('.show_hide').toggle(function(){
       $(this).find('img').attr('src', 'http://besttravelagent.com/wp-content/themes/best-travel-agent/images/minus.png' );
       $(this).parent().find('div[class^="block"]').slideDown();

   },function(){
       $(this).find('img').attr('src', 'http://besttravelagent.com/wp-content/themes/best-travel-agent/images/plus.png' );
       $(this).parent().find('div[class^="block"]').slideUp()
});

两个链接的通用/通用功能。

jQuery向上滑动/向下滑动 - 如何停止重复自己？

2 个答案: