1

要素にアタッチされているイベントハンドラーが必要です。これはデフォルトでは表示されません。

そこにはいくつかのjQueryタブがあり、私がターゲットにしているタブもデフォルトでは非表示になっています。

<div id="help" class="hidden">
     <div id="my-help-tab" class="hidden">
         <div class="targeted">
             <a href="#" class="show-hide">Show</a>
             <pre>test</pre>
         </div>
     </div>
</div>

では、要素にクラス（およびその子）がない.toggle()場合にトリガーされるイベントハンドラー（表示/非表示用）をどのようにアタッチしますか？hidden

私の現在のソリューションは、最初はトリガーされませんが、2回目または3回目のクリックでのみトリガーされます。

jQuery( document ).ready( function($)
{
    $( '.targeted' ).on( 'click', function( e )
    {
        event.preventDefault();
        $( this ).children( '.show-hide' ).on( 'click', function( e )
        {
            $( this ).toggle(
                function( e ) 
                {
                    $( this ).html( 'Hide' );
                    $( this ).next( 'pre' ).toggle();
                },
                function()
                {
                    $( this ).html( 'Show' );
                    $( this ).next( 'pre' ).toggle();
                }
            );
        } );
    } );
} );
4

1 に答える 1

2

あなたはできる：

jQuery( document ).ready( function($)
{
    $('#my-help-tab:not(.hidden) > .targeted > a').on( 'click', function( e )
    {
        event.preventDefault();
        $( this ).children( '.show-hide' ).on( 'click', function( e )
        {
            $( this ).toggle(
                function( e ) 
                {
                    $( this ).html( 'Hide' );
                    $( this ).next( 'pre' ).toggle();
                },
                function()
                {
                    $( this ).html( 'Show' );
                    $( this ).next( 'pre' ).toggle();
                }
            );
        } );
    } );
} );

または：

$('#help:not(.hidden) .targeted > a')

または（しかしおそらく不要）：

$('#help:not(.hidden) > #my-help-tab:not(.hidden) > .targeted > a')

クラスなしの別のアプローチ：

$('#my-help-tab:visible > .targeted > a')

次のドキュメントをお読みください。

そして、子孫セレクターと子セレクターの詳細については、この回答をお読みください。

于 2012-09-14T15:12:26.373 に答える