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>

我想做的是在click .section_header> h1上工作的切换/显示和隐藏功能，以显示具有在data-target中定义的id的div，并将其隐藏在h1标记内，但始终保持打开状态和#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-hide，并认为它可以工作，但我没有成功告诉它关闭并显示哪个div

编辑：还有一件事，当单击可见的div将其关闭并打开下一个时，该怎么办？

Answer 1

有关该代码的有效版本，请参见此小提琴 。

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

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

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