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') );
        }

    });

这有效，但是当我第二次单击标题以隐藏.info <div>标题时，标题也会被隐藏。为什么？！

4

5 回答 5

1

我认为您对如何指定选择器感到困惑。例如，您在哪里

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

我想你想要

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

这是一个工作示例

于 2012-04-26T18:41:57.907 回答
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').show(300)
$('.info').hide(300)

如果您确实在其他地方使用该类，您可以给它一个 ID<div id="info" class="info"></div>并使用$('#info')

hide()此外，如果条件的唯一目的是在和之间切换show()（如果没有与类关联的 css），请尝试使用该toggle()函数。

于 2012-04-26T18:40:54.740 回答
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

您可以分两行执行此操作：

$( '.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 回答