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();