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＆gt; h1 显示带有在h1标记内的数据目标中定义的id的div并隐藏其他内容，但始终打开一个并且默认情况下在页面加载时打开#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并显示

修改还有一件事，当点击可见的div来关闭它并打开下一个时，怎么办呢？

Answer 1

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

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

jquery toggle / show＆amp; hide divs

3 个答案: