JQuery переключить / показать и скрыть Div - PullRequest
Новая
       24

JQuery переключить / показать и скрыть Div

1 голос
/ 16 января 2012

У меня есть эта 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 сидентификатор определен в data-target внутри тега 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-hiding и подумал, что это может работать, но мне не удалось определить, какой div закрыть иshow

Редактировать: Есть еще одна вещь, как это можно сделать, когда при нажатии на видимый div, чтобы закрыть его и открыть следующий?

Ответы [ 3 ]

2 голосов
/ 16 января 2012

См. Эту скрипку для рабочей версии вашего кода . 

$('.section_header h1').on('click', function(){
    $('#home > div:not(.section_header)').hide();
    $('#' + $(this).data('target')).show();
}).first().click();
1 голос
/ 16 января 2012

Попробуйте это: http://jsbin.com/unetay/3/edit

1 голос
/ 16 января 2012

попробуйте это:

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

РЕДАКТИРОВАТЬ Теперь оно должно соответствовать вашим требованиям

...