2

2 つの div があり、1 つは表示され、もう 1 つは表示されません。リンクをクリックして表示を切り替えたいのですが、2 回目に切り替えると、最初の div が表示されません。

HTML:

<div class="search-extra">
  <a href="#" id="toggle-to-advanced">Toggle to red</a>
</div>

<div class="search-advanced">
  <a href="#" id="toggle-to-normal">Toggle to black</a>
</div>​

CSS:

.search-advanced{display:none;}

jQuery: 

jQuery('#toggle-to-normal').click(function(e){
    e.preventDefault();
    jQuery('.search-advanced').slideUp('normal').queue( function(){
        jQuery('.search-extra').slideDown('normal');
    });
});

jQuery('#toggle-to-advanced').click(function(e){
    e.preventDefault();
    jQuery('.search-extra').slideUp('normal').queue( function(){
        jQuery('.search-advanced').slideDown('normal');
    });
});​

デモ：

http://jsfiddle.net/rekQ9/

4

2 に答える 2

5

の代わりにqueue、スライドでコールバック関数を使用して機能させることができます。

http://jsfiddle.net/rekQ9/2/

于 2012-08-08T10:01:42.030 に答える
1 
jQuery('#toggle-to-normal').click(function(e){
    e.preventDefault();
    jQuery('.search-advanced').slideUp('normal',function(){
        jQuery('.search-extra').slideDown('normal');
    });
});

jQuery('#toggle-to-advanced').click(function(e){
    e.preventDefault();
    jQuery('.search-extra').slideUp('normal', function(){
        jQuery('.search-advanced').slideDown('normal');
    });
});
于 2012-08-08T10:05:18.473 に答える