javascript - トグル機能の使用方法 1 つが選択されているときに、メニューを開いたり閉じたりして閉じる

Question

さまざまなチュートリアルを検索した後、自分のニーズにほぼ合ったものを見つけましたが、メニューを自分が本当に望むように機能させるのに苦労しています.

私は自分の努力を示すためにjsfiddleを設定しました。理解するために最善を尽くしていますが、これはあまり得意ではありません。

http://jsfiddle.net/HZksH/2/

デフォルトでコンテンツ1領域を常に表示する場合、このメニューを取得する方法について助けてください、コンテンツが content1 を置き換えてから、メニューを再び閉じます

任意のアイデアをいただければ幸いです

<div class="menu">
    <div class="submenu" id="menu" data-content="sort">menu1</div>
    <div class="content" id="sort">content1</div>
    <div class="submenu" id="menu1" data-content="1sort">menu2</div>
    <div class="content" id="1sort">content2</div>
    <div class="submenu" id="menu2" data-content="sort2">menu3</div>
    <div class="content" id="sort2">content3</div>
</div>

$(document).ready(function() {
    $('.menu').hide().before('<a href="#" id="toggle-menu" class="button">Open/Close</a>');

    $('a#toggle-menu').click(function() {
        $('.menu').slideToggle(1000);
        return false;
    });    

    $('.content').hide();
    $('.submenu').click(function(){
        $('.content:visible').hide('fast');
        $('#' + $(this).data('content')).show('fast');
    });
});