0

表示フィールドを使用して複数のコンテンツを下にスライドさせようとしています。これはうまくいきます。また、クラスは「up」にうまく変化します。それでも、テキストをもう一度クリックしても何も起こりません。なぜこれが機能しないのですか？誰かがより良い解決策を持っていますか?

jQuery('#slidetoggle.down').click(function(e){
    jQuery('.slider').slideUp();
    jQuery(this).text('show fields');
    jQuery(this).toggleClass('down');
    jQuery(this).toggleClass('up');
});
jQuery('#slidetoggle.up').click(function(e){
    jQuery('.slider').slideDown();
    jQuery(this).text('hide fields');
    jQuery(this).toggleClass('up');
    jQuery(this).toggleClass('down');
});
4

5 に答える 5

3

次のようなコード:

jQuery('some selector')

後でセレクターに一致する可能性のある要素に注意を払うの'some selector' ではなく、現在一致する要素を見つけるように指示します。

おそらく、要素には最初は「up」クラスと「down」クラスのいずれかしかないため、クリック ハンドラーの 1 つだけがバインドされます。

代わりにこれを行うことができます：

jQuery('#slidetoggle').click(function(e){
    if ($(this).hasClass('down')) {
       jQuery('.slider').slideUp();
       jQuery(this).text('show fields').toggleClass('down up');
    } else {
       jQuery('.slider').slideDown();
       jQuery(this).text('hide fields').toggleClass('up down');
    }
});

デモ: http://jsfiddle.net/SBDDx/

于 2013-03-22T10:57:21.490 に答える
0

あなたがする必要があるのはトグルです-

jQuery('#slidetoggle').click(function(e){
   jQuery('.slider').toggle('slideUp');

}）;

デモ

于 2013-03-22T11:22:27.107 に答える
0

別の戦略で同じ結果を得ることができました。

最初に、display:none; を使用してボタンの 1 つを非表示にします。それで：

jQuery('#slidetoggle.down').click(function(e){
    jQuery('.slider').slideUp();
    jQuery(this).hide();
    jQuery('#slidetoggle.up').show();
});
jQuery('#slidetoggle.up').click(function(e){
    jQuery('.slider').slideDown();
    jQuery(this).hide();
    jQuery('#slidetoggle.down').show();
});
于 2013-03-22T12:48:38.700 に答える
0

私があなたを正しく迎えているなら、同じボタンを使用していると思うので、IDも変更する必要があります..テキストを変更していますが、入力のIDは変更していません...したがって、他のIDのコードは変更されません仕事

それにもかかわらず、このような1つのセレクターに対してこのコードを記述する必要があります

jQuery('#slidetoggle').click(function(e)
{
  var text   = (jQuery(this).text() == 'show fields')?'hide field':'show fields';
  jQuery('.slider').slideToggle();
  jQuery(this).text(text);
  jQuery(this).toggleClass('down');
  jQuery(this).toggleClass('up');
});
于 2013-03-22T11:03:27.790 に答える
0

.upページの読み込み時に要素が存在しないためです。

あなたはそれを「少し」違うようにするべきです:)

$('#slidetoggle')
.on('click', function(e){
    var $this = $(this),
        $slider = $('.slider'),
        isOpened = $slider.is(':visible');

    if (isOpened)
    {
        $slider.slideUp();
        $this.text('show fields');
    }
    else
    {
        $slider.slideDown();
        $this.text('hide fields');
    }
});

http://jsfiddle.net/qwL33/

于 2013-03-22T11:13:43.380 に答える