如何使用切換功能當選擇一個時，點擊打開和關閉關閉菜單

Question

通過搜索各種教程後，我發現了幾乎符合我需要的東西，但我無法使菜單正常工作，我真的很希望它。

我設置了一個jsfiddle來顯示我的努力，即使我盡我所能瞭解，我也不是很擅長。

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

我想就如何我能得到這個菜單一些幫助，在默認情況下始終顯示的內容1區，然後如果你切換打開「打開/關閉」 BUTTOM和菜單1，MENU2，菜單3出現，當我選擇任何3個，內容替換內容1，然後關閉菜單再次

任何想法，將不勝感激

<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'); 
    }); 
}); 

Answer 1

他再參考這個小提琴：http://jsfiddle.net/HZksH/3/

我已經修改了你的JS有點

$(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'); 
    $('.menu').slideToggle(1000); 
}); 
}); 

我希望儘量解決您的問題