0

タイトルがクリックされたときにもののブロックを表示/非表示にする簡単なjqueryアニメーションを書いています。マークアップは次のようになります。

<section class="infoblock off">
<h2><span class="sectiontitle rounded-right">TITLE (click to show/hide)</span></h2>
<div class="info"></div><!--info-->
</section>

私のJavaScriptは次のようになります：

        $(".infoblock h2").click( function(event) {
        //console.log('show info');

        if ( $(this).parent( $('.infoblock') ).hasClass('off') ) {          
            $(this).parent( $('.infoblock') ).removeClass('off');
            $(this).parent( $('.infoblock') ).addClass('on').children( $('.info') ).show(300);
            console.log( 'On function. Parent class= '+$(this).parent( $('.infoblock') ).attr('class') );

        } else if ( $(this).parent( $('.infoblock') ).hasClass('on') ) {
            $(this).parent( $('.infoblock') ).removeClass('on');
            $(this).parent( $('.infoblock') ).addClass('off');
            $(this).parent( $('.infoblock') ).children( $('.info') ).hide(300);
            console.log( 'Off function. Parent class= '+$(this).parent( $('.infoblock') ).attr('class') );
        }

    });

これは機能しますが、タイトルを2回クリックしてタイトルを非表示にすると.info <div>、タイトルも非表示になります。どうして？！

4

5 に答える 5

1

セレクターの指定方法がわからないと思います。たとえば、あなたが持っているところ

$(this).parent( $('.infoblock') ).hasClass('off')

私はあなたが欲しいと思います

$(this).parent('.infoblock').hasClass('off')

これが実際の例です

于 2012-04-26T18:41:57.907 に答える
0

親要素への参照を保存し、次のようにjQueryの関数チェーンを利用します。

$(".infoblock h2").click( function(event) {
        //console.log('show info');
        var $parent = $(this).parent('.infoblock');

        $parent.toggleClass("off").toggleClass("on").children($('.info')).toggle(300);

        if ($parent.hasClass('on')) {          
            console.log( 'On function. Parent class= '+$parent.attr('class'));
        } else if ($parent.hasClass('off')) {
            console.log( 'Off function. Parent class= '+$parent.attr('class'));
        }
});
于 2012-04-26T18:42:34.643 に答える
0

デモ: http://jsfiddle.net/RQ2Cw/1/

parentを使用する代わりにclosest、およびchildren使用する代わりにfind

$(".infoblock h2").click(function(event) {
    //console.log('show info');
    if ($(this).closest('.infoblock').hasClass('off')) {
        $(this).closest('.infoblock').removeClass('off');
        $(this).closest('.infoblock').addClass('on').find('.info').show(300);
        console.log('On function. Parent class= ' + $(this).closest('.infoblock').attr('class'));

    } else if ($(this).parent('.infoblock').hasClass('on')) {
        $(this).closest('.infoblock').removeClass('on');
        $(this).closest('.infoblock').addClass('off');
        $(this).closest('.infoblock').find('.info').hide(300);
        console.log('Off function. Parent class= ' + $(this).closest('.infoblock').attr('class'));
    }

});​

また ：

$(".infoblock h2").click(function(event) {
    var _parent = $(this).closest('.infoblock');
    if (_parent.hasClass('off')) {
        _parent.removeClass('off').addClass('on').find('.info').show(300);

    } else if (_parent.hasClass('on')) {
        _parent.removeClass('on').addClass('off').find('.info').hide(300);
    }

});​
于 2012-04-26T18:40:04.583 に答える
0

「info」クラスを他の場所で使用しない場合は、セレクターとして直接使用できます。

$('.info').show(300)
$('.info').hide(300)

クラスを別の場所で使用する場合は、ID<div id="info" class="info"></div>を指定して、$('#info')

hide()また、条件のみの目的がandを切り替えることでshow()ある場合 (クラスに関連付けられた css がない場合)、toggle()関数を使用してみてください。

于 2012-04-26T18:40:54.740 に答える
0

これは 2 行で行うことができます。

$( '.infoblock' ).on( 'click', 'h2', function () {   
    var $elem = $( this ).closest( '.infoblock' ).toggleClass( 'on off' );   
    $elem.find( '.info' )[ $elem.hasClass( 'on' ) ? 'show' : 'hide' ]( 300 );
});

ライブデモ: http://jsfiddle.net/dpdvg/1/

于 2012-04-26T18:49:17.127 に答える