jQuery的切换/显示隐藏的div

Question

我有这样的HTML结构：

<div id="home"> 

    <div class="section_header"> 
     <h1 class="left" data-target="newest"><?=lang('home_newest');?></h1> 
     ... 
    </div> 
    <div id="newest"> 
     ... 
    </div> 

    <div class="section_header"> 
     <h1 class="left" data-target="best"><?=lang('home_newest');?></h1> 
     ... 
    </div> 
    <div id="best"> 
     ... 
    </div> 

</div> 

我所试图做的是一个切换/显示&隐藏的函数，在点击工作.section_header> H1，以示与DIV在h1标签内的数据目标中定义的id并隐藏其他标签，但始终打开一个标签并在页面加载时默认打开#newest。

我曾尝试：

$('.section_header h1').click(function(){ 
    var selected = $(this).data('target'); 
    //$('#'+selected).hide().filter('#'+selected).show(); 
    $('#home > #'+selected).hide(); 
}).first().click(); 

的注释行不工作，但.hide只有它。

我发现这一点：http://www.learningjquery.com/2007/02/more-showing-more-hiding并认为它可以工作，但我没有成功，告诉它关闭其格，并显示

编辑： 有一两件事，怎么能做到这一点当点击可见的div关闭它并打开下一个？

Answer 1

试试这个：http://jsbin.com/unetay/3/edit

Answer 2

试试这个：

HTML：

<div id="home"> 

    <div class="section_header"> 
     <h1 class="left" data-target="newest">h1<?=lang('home_newest');?></h1> 
    </div> 
    <div id="newest"> 
    ... 
    </div> 

    <div class="section_header"> 
     <h1 class="left" data-target="best">h2<?=lang('home_newest');?></h1> 
    </div> 
    <div id="best"> 
     ... 
    </div> 

</div> 

CSS

#home div { display: none;} 
#home div.section_header { display:block;} 

JS

$(document).ready(function() { 
    $('.section_header > h1').click(function() { 
     showOnlySingleHeader.call(this); 
    }); 
    showOnlySingleHeader.call($('.section_header > h1[data-target="newest"]')); 
}); 

function showOnlySingleHeader() { 
    $('#' + $(this).data('target')).toggle(); 
    $('.section_header > h1').not(this).each(function() { 
     $('#' + $(this).data('target')).hide(); 
    }); 
} 

这里有一个JSFiddle

---

编辑现在应该符合你的要求

Answer 3

See this Fiddle for a working version of your code。

$('.section_header h1').on('click', function(){ 
    $('#home > div:not(.section_header)').hide(); 
    $('#' + $(this).data('target')).show(); 
}).first().click();