jQuery not: (это) исключить все из класса, кроме того, который вызывается в предыдущей функции

Привет всем, у меня есть несколько скрытых элементов div, которые отображаются с помощью динамической функции slideToggle. Все отлично работает, но элементы div не отображаются, когда вы нажимаете на другие ссылки. Я бы хотел, чтобы один div отображался за раз. Щелчок скрывает другие и показывает новый. Кажется, я никогда не смогу получить полную правильную функцию!

Спасибо за ваше время! Я очень ценю это. Просто маленький ребенок здесь.

HTML:

    <div id="nav">
        <div class="menu"><a id="show_work">WORK</a></div>
            <div id="work" class="sub">
                <p>hidden content</p>
            </div>
        <div class="menu"><a id="show_biography">BIO</a></div>
            <div id="biography" class="sub" >
                <p>hidden content</p>
            </div>
        <div class="menu"><a id="show_contact">CONTACT</a></div>
            <div id="contact" class="sub">
                <p>hidden content</p>
            </div>
     </div>

Javascript, который работает, но оставляет их открытыми:

$('#work, #biography, #contact').hide();
$('#nav .menu').click(function() {
    $(this).next().slideToggle(400);
    return false;
}).next().hide();

Искаженный концептуальный Javascript того, что я хотел бы:

$('#work, #biography, #contact').hide();
$('#nav .menu').click(function() {
    $(this).slideToggle(400);
    $('.sub not:(this)').slideUp(400);
});
return false;
});.next().hide();

javascript jquery this slidetoggle
person technopeasant    schedule 05.04.2011    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Это то, что вы ищете?

$('.sub').hide();
$('#nav .menu').click(function() {
    $('.sub:visible').not($(this).next()).slideUp(400);
    $(this).next().slideToggle(400);
    return false;
});

Вот скрипка, чтобы посмотреть, как она работает.

person EvilAmarant7x    schedule 06.04.2011

arrow_upward
1
arrow_downward

Я бы просто написал функцию, которая скрывает все элементы div при любом нажатии:

function hideDivs() {
  $(".menu div").hide();
}

Тогда ваши клики будут выглядеть так:

$('#show_work').click(function() {
    hideDivs();
    $('#work').slideToggle(400);
});

$('#show_biography').click(function() {
    hideDivs();
    $('#biography').slideToggle(400);
});

$('#show_contact').click(function() {
    hideDivs();
    $('#contact').slideToggle(400);
});

Это работает, скрывая все элементы div независимо от того, какая ссылка была нажата. Вы можете скрыть нецелевые элементы div вручную (как показано ниже), но я думаю, что скрытие их всех — хороший подход.

Альтернатива (более уродливая и менее ремонтопригодная - также требуется логика для пропуска вызова slideToggle, если "show div" уже виден):

$('#show_work').click(function() {
    $('#show_biography, #show_contact').hide();
    $('#work').slideToggle(400);
});

$('#show_biography').click(function() {
    $('#show_work, #show_contact').hide();
    $('#biography').slideToggle(400);
});

$('#show_contact').click(function() {
    $('#show_work, #show_biography').hide();
    $('#contact').slideToggle(400);
});
person Andy Gaskell    schedule 05.04.2011
comment
Кажется, что это мгновенно закроет открытый элемент, а затем постепенно откроет новый. Выглядело бы немного странно. Разве вы не должны закрывать открытый элемент, одновременно открывая новый? - person RandomEngy; 06.04.2011
comment
Да, вы могли скользить вместо того, чтобы прятаться — это была скорее концепция, чем готовый продукт. - person Andy Gaskell; 06.04.2011
comment
Это сработало, но как-то неуклюже. Я обновил свой вопрос с помощью упрощенной функции. надеюсь, это поможет прояснить, что я ищу - person technopeasant; 06.04.2011

arrow_upward
0
arrow_downward

Элемент управления аккордеоном из пользовательского интерфейса jQuery кажется, что он сделает то, что вы ищете.

person RandomEngy    schedule 05.04.2011
comment
круто! никогда не видел его ... к сожалению, он всегда оставляет один открытым (я бы хотел начать с них всех закрытыми) и конфликтует с моим макетом (скрытые элементы div не находятся непосредственно под соответствующей ссылкой). пытался отжимать его.. но он не был достаточно гладким. также имело место это странное выделение. - person technopeasant; 06.04.2011
comment
@technopeasant Управление аккордеоном имеет складную опцию, которая позволяет закрывать все секции. Но если это конфликтует с другими вашими вещами, это не решит проблему. - person EvilAmarant7x; 06.04.2011