Скрыть все ранее переключенные элементы

Question

У меня есть боковое меню, которое открывает и закрывает скрытые части страницы через jQuery. Ссылка скрывает скрытый контент, а также добавляет и удаляет класс для ссылки. Так, например, HTML / CSS

<ul>
<li><a class="linkOne" href="#">Link One</a></li>
<li><a class="linkTwo" href="#">Link Two</a></li>
</ul>

<div class="linkOneBox">Stuff</div>
<div class="linkTwoBox">Stuff</div>

<style type="text/css">
.linkOneBox,.linkTwoBox {display:none}
.current {background: #fff}
</style>

и jQuery что-то вроде ..

$('.linkOne').click(function() {
    $('.linkOneBox').fadeToggle();
    $(this).toggleClass('current'); 
    return false; 
    });

В любом случае ... мой вопрос в том, что, поскольку я использую переключатель, каков наилучший способ отключить все остальные переключатели, которые были оставлены открытыми? Как бы это сделать, чтобы при нажатии на новую ссылку также скрывались все ранее открытые окна и удалялся .current?

Answer 1

Я согласен с Марком, но использую:

$(this).addClass('current');

Поскольку toggleClass сначала проверяет, существует ли класс.

Answer 2

Сначала я внесу несколько изменений в HTML:

<ul id="menu">
    <li><a href="#b1">Link One</a></li>
    <li><a href="#b2">Link Two</a></li>
</ul>

<div class="box" id="b2">Stuff</div>
<div class="box" id="b1">Stuff</div>

Тогда:

$(document).ready(function(){

    // Initially hide the boxes
    $('.box').hide();

    $('#menu a').click(function(){

        $('#menu a').removeClass(); // Remove 'current' class from any links
        $('.box:visible').fadeToggle(); // Hide all previously visible boxes

        // Fade in the box where the id is the same as the href of the clicked link
        $($(this).attr('href')).fadeToggle(); 
        $(this).addClass('current'); // And highlight the menu link

        return false; 
    });

});

Существует некоторое совпадение, поэтому вместо этого вы можете просто hide() открыть поля, прежде чем добавить новые.