Javascript切换隐藏

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

这里是我的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）”的ike来切换“div_one1”等等。

请帮忙

来源

2013-09-25 babusi

首先快速侧面说明：把一个'div'的'了'里面是无效的HTML，并可能导致某些浏览器的问题;使用'span' - 如果需要，你仍然可以设置'display：block'的形式，但不会导致问题再次出现（或者只是样式化'a'标签并将内部元素放在一起） –

注意到并感谢你！ – babusi

@CollinGrady Fyi你可以在HTML5以后的锚标签里面有块元素。它仍然是一个有效的HTML。 – PSL

你写的代码纯粹是一个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

来源

2013-09-26 00:11:40

热潮！非常简洁，重点突出。谢谢！我会保存在我的笔记 – babusi

我迟到了，但为你打造它，只是作为回答发布

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

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

DEMO.

来源

2013-09-26 00:22:03

谢谢。请接受我的谦虚upvote – babusi

真的很感激它，谢谢:-) –

这不会切换的东西;它仍然只显示该部分，不会再隐藏它:) –

Javascript切换隐藏

回答

相关问题