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

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

0 голосов
/ 06 апреля 2011

Привет всем, у меня есть некоторые скрытые 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();

Ответы [ 3 ]

1 голос
/ 06 апреля 2011

Я бы просто написал функцию, которая скрывает все элементы 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);
});

Это работает, скрывая всеиз divs независимо от того, какая ссылка была нажата.Вы можете скрыть нецелевые 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);
});
0 голосов
/ 06 апреля 2011

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

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

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

0 голосов
/ 06 апреля 2011

Управление аккордеоном из jQuery UI похоже, что оно будет делать то, что вы ищете.

...