如何使用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