jQuery hide / show div onclick span [英] jQuery hide/show div onclick span

问题描述

我试图获得一个项目的jQuery的摇摆，我在这里和那里拾起一些东西，但每时每刻，我碰到一个bumb。在这个jsFiddle你可以看到我的工作： http://jsfiddle.net/YpeeR/17/

  jQuery（document）.ready（function（）{
 jQuery（'。toggle_hide'）。 hide（）; 
 
 jQuery（＃background_absolute_content li span）。css（'cursor'，'pointer'）。 ）; 
 $（'。toggle_hide'）。not（$ this.next（div））。fadeOut（200，function（）{
 $ this.next（div）。fadeIn （200）; 
}）; 
}）; 
  

}）;

我有一个li元素中隐藏了4个div。当用户单击li元素中的span标签（其中div是div和其他div被关闭）时，div将显示。

所以当用户点击li元素中的一个span时，隐藏的div就会显示出来并且当用户再次点击相同的跨度时，我想要div再次隐藏。

不幸的是，fadeToggle似乎并没有做到这一点，你可以在这里看到 http://jsfiddle.net/YpeeR/18/ ，但我似乎不明白为什么是...

解决方案

我放慢了速度以显示更改： http：// jsfiddle。 net / YpeeR / 23 /

  jQuery（document）.ready（function（）{
 jQuery （'.toggle_hide'）。hide（）; 
 
 jQuery（＃background_absolute_content li span）。css（'cursor'，'pointer'）。 var $ this = $（this）; 
 $ this.next（div）。fadeToggle（200）; 
 $（'。toggle_hide'）。not（$ this.next ））。fadeOut（800）; 
}）; 
}）
  

你的动画完成后，每个div都调用 $ this.next（div）。fadeIn（200）; 3次，而不是$ this.next。 p>

I'm trying to get the swing of jQuery for an project and I pick up some things here and there but every now and then I hit a bumb.

On this jsFiddle you can see what I'm working on: http://jsfiddle.net/YpeeR/17/

jQuery(document).ready(function() {
jQuery('.toggle_hide').hide();

jQuery("#background_absolute_content li span").css('cursor', 'pointer').click(function() {
    var $this = $(this);
    $('.toggle_hide').not($this.next("div")).fadeOut(200, function() {
        $this.next("div").fadeIn(200);
    });
});

});

I have 4 divs hidden inside an li element. The div get shown when the user clicks on the span tag inside that li element where the div is and other div's get closed down. This works fine but I want to user to be able to toggle the current div too.

So when the user clicks an span in an li element the div that's hidden gets shown and when the user clicks on the same span again I want the div to hide again.

Unfortunately fadeToggle does not seem to do the trick propper as you can see here http://jsfiddle.net/YpeeR/18/ , but I can't seem to figure out why that is...

解决方案

I slowed it down to show the changes: http://jsfiddle.net/YpeeR/23/

jQuery(document).ready(function() {
    jQuery('.toggle_hide').hide();

    jQuery("#background_absolute_content li span").css('cursor', 'pointer').click(function() {
        var $this = $(this);
        $this.next("div").fadeToggle(200);
        $('.toggle_hide').not($this.next("div")).fadeOut(800);
    });
})

You were calling $this.next("div").fadeIn(200); 3 times for each div, not $this.next, once their animations finished.

这篇关于jQuery hide / show div onclick span的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！