Блог

Всем привет, у меня есть несколько скрытых разделов, которые отображаются с помощью динамической функции slideToggle. Все работает отлично, но divs остаются отображаемыми при нажатии на другие ссылки. Я бы хотел, чтобы одновременно отображался один 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();
  

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

 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, независимо от того, по какой ссылке был нажат. Вы могли бы скрыть нецелевые разделы вручную (показано ниже), но я думаю, что скрыть их все — хороший подход.

Альтернатива (более уродливая и менее обслуживаемая — также требуется логика, чтобы пропустить вызов slideToggle, если «показать 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);
});
  

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

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

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

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