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（也是子元素）时触发？

我当前的解决方案不会在第一次触发时触发，而只会在第二次或第三次点击时触发。

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 回答