如何使用 Jquery 或 Javascript 实现展开和关闭 - 滑动菜单？

Question

I have a left navigation menu in my page.

I need to use something like that navigation window will be closed by default the very first time when the page loads.

If the user wants to view the navigation menu he/she needs to click a small icon above the navigation menu eg: ">>" and click "<<" if they want to close it

Which control do I need to use for this in Jquery.

Thanks

Answer 1

You can hide anything in jQuery with hide() .

So for example, if your menu children have the class .children , you would call this at the beginning of your script:

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

when you had a menu like:

<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>

Let's say you have a >> button which has the ID #expand . In order to "slide" the children down (to make them visible) you could do:

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

The same holds for sliding them up to make them invisible again:

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

Answer 2

Although I don't understand entirely your problem, but you can add a Link like:

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

then associate a click event to this link

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

Try that, replacing the.click and.target class names where appropriate.

Answer 4

Here's what you'll need:

for hiding: http://docs.jquery.com/UI/Effects/Slide

for showing: http://docs.jquery.com/UI/Effects/show