Question

我正在学习javascript，我正试图切换一个简单的隐藏，并揭示效果，没有运气。目前只有通过点击具有相同参考的另一个div才能取消效果。

这是我的javascript：

var $ = jQuery;

$(document).ready(function(){
    $('.section').hide(); 
});

function showMe(num){
    $('.section').hide(0);   
    $('#div_one'+num).fadeIn(1000); 

}

这是我的CSS：

.height-auto

{
    height:auto;
}
.section

{
    width:552px;
    min-height:300px;

}

这是我的HTML：

    <div class="section home-things visible" id="div_one1">

        <div class="section-contents"></div>
    </div>
</div>

理想情况下，我想要“javascript：showMe（1）”来切换“div_one1”等等。

请帮忙

Answer 1

您编写的代码纯粹是一个show函数。你可以在showMe的每次通话中隐藏它，然后再显示它。

以下内容可以使其成为实际切换：

function showMe(num)
{
    if ($('#div_one'+num).is(":visible"))
    { // the div is visible, so we just want to hide it
        $('#div_one'+num).hide();
    }
    else
    { // the div is not visible, so hide the rest and show it
        $('.section').hide(0);
        $('#div_one'+num).fadeIn(1000);
    }

    // I don't know what these next two lines are for,
    // as your code sample doesn't include them, so leaving as-is :)
    $('.height-auto').removeClass('height-auto');
    $('#strict').addClass('height-auto');
}

然而，jQuery有一些方便的内置函数可以缩短它们的时间：

function showMe(num)
{
    $('#div_one'+num).siblings('.section').hide();
    $('#div_one'+num).fadeToggle();

    // I don't know what these next two lines are for,
    // as your code sample doesn't include them, so leaving as-is :)
    $('.height-auto').removeClass('height-auto');
    $('#strict').addClass('height-auto');
}

jsFiddle

Answer 2

我迟到但是为你建造它只是张贴作为答案

$(document).ready(function(){
    $('.section').hide(); 
    $('#div_one1').show();
});

function showMe(num){
    $('.section').hide();
    $('#div_one'+num).fadeIn(300); 
}

DEMO.

Javascript切换隐藏

2 个答案: