使用jQuery显示/隐藏嵌套的div

时间:2012-04-04 12:10:54

标签: jquery html

我无法使用以下jquery工作,例如,如果我单击一个框并将其保持打开然后单击另一个框,则单击第二个框将关闭第一个框,但直到我单击第二个框才会显示第二个框再次,我如何获取我的代码,以便第二个框例如关闭所有其他打开的框并显示其内容而不再单击它?

HTML code:

<div class="button">
    <a class="remove">Remove</a> 
    <a class="time">Time</a>
    <a class="space">Space</a> 
    more links......

    <div class="container">
        <div class="firs-container">
            .......
        </div>

        <div class="sec-container">
            .......
        </div>

        <div class="third-container">
            .......
        <div>
    </div>
</div>

JQuery代码:

$(document).ready(function() {
    $('a.remove, a.cancel').click(function(){
        $(this).closest('.button').find('.container:first').children().hide();
        $(this).closest('.button').find('.container:first').fadeToggle('slow', 'linear');
        $(this).closest('.button').find('.sec-container:first').fadeToggle('slow', 'linear');
        // prevent default action
        return false;
    }); 
});

1 个答案:

答案 0 :(得分:0)

它应该移动,但我仍然想给你一个提示(如果你使用的是jQuery 1.7.x)

jQuery( document ).ready( function($)
{
    $( '.selector' ).on( 'click', function()
    {
        // do stuff
    } );
} );

请注意WP / jQuery没有冲突模式,并确保你在一个正确包装的函数内部»检查你的控制台是否有错误