如何使用Jquery或Javascript實現展開和關閉 - 滑動菜單？

Question

我的頁面有一個左側的導航菜單。

我需要使用類似於那個導航窗口將在頁面加載時第一次被默認關閉。

如果用戶想要查看他/她需要點擊導航菜單如上面的小圖標的導航菜單：「>>」，然後點擊「< <」如果他們要關閉它

哪個控制我需要在JQuery中使用這個嗎？

感謝

Answer 1

您可以隱藏的jQuery與hide()什麼。

因此，舉例來說，如果你的菜單孩子有類.children，你會在你的腳本的開頭調用此：

$(".children").hide(); 

，當你有一個像菜單：

<div class="menu"> 
    <div class="parent">Foo 1</div> 
    <div class="children">Bar 1</div> 
    <div class="children">Bar 2</div> 
    <div class="children">Bar 3</div> 
    <div class="parent">Foo 2</div> 
    <div class="children">Baz 1</div> 
</div> 

讓我們假設您有一個>>按鈕，其ID爲#expand。爲了"slide" the children down（使它們可見），你可以這樣做：

$("#expand").click(function(){ 
    $(".children").slideDown(); 
}); 

這同樣適用於sliding them up使他們再次隱形：

$("#collapse").click(function(){ 
    $(".children").slideUp(); 
}); 

Answer 2

雖然我不完全理解你的問題，但你可以添加一個鏈接，如：

<a id="myID" href="#">>></a> 

然後點擊事件給這個鏈接

關聯

$('a#myID').click(function(){ 
// Show or hide your division for example 
}); 

Answer 3

$('a.click').click(function() { 
    var html = $(this).html() == '»' ? '«' : '»'; 
    $(this).html(html); 
    $('div.target').toggle(); 
}); 

試一試，在適當的位置替換.click和.target類的名稱。

Answer 4

這裏有你需要的東西：

隱蔽性：http://docs.jquery.com/UI/Effects/Slide

用於顯示：http://docs.jquery.com/UI/Effects/show