#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2004
    Posts
    292
    Rep Power
    15

    Jquery collapsible-menu problem


    I am using the jquery collapsible menu. It is a simple script that allows me to have expandable and collapsible menus.

    The problem I have is when you click the links to open up the drop downs, the page jumps to the very top. So if you have scrolled down and click the link, it makes the page jump to the top.

    Is there a way of stopping this?

    Also, is there a way with the code below to change it so that when you click on a link to open up the menu, if you click another link the previous menu closes.

    So only allowing one menu to be collapsible at a time. To keep things neat.

    Hopefully, someone has used this and knows of a fix.

    Here is my menu:

    Code:
    <ul id="Menu">
     <li><a href="#">Menu 1</a>
        <ul>
         <li><a href="#">Link A</a></li>
         <li><a href="#">Link B</a></li>
        </ul>
       </li>
       <li><a href="#">Menu 2</a>
        <ul>
         <li><a href="#">Link A</a></li>
         <li><a href="#">Link B</a></li>
        </ul>
       </li>
       <li><a href="#">Menu 3</a>
        <ul>
         <li><a href="#">Link A</a></li>
         <li><a href="#">Link B</a></li>
        </ul>
       </li>
       <li><a href="#">Menu 4</a>
        <ul>
         <li><a href="#">Link A</a></li>
         <li><a href="#">Link B</a></li>
        </ul>
       </li>
       <li><a href="#">Menu 5</a>
        <ul>
         <li><a href="#">Link A</a></li>
         <li><a href="#">Link B</a></li>
        </ul>
       </li>
    </ul>
    Here is the javascript.

    Code:
    $(document).ready(function() {
    	// Collapse everything but the first menu:
    	$("#Menu > li > a").not(":AAA").find("+ ul").slideUp(1);
    	
    	// Expand or collapse:
    	$("#Menu > li > a").click(function() {
    		$(this).find("+ ul").slideToggle("fast");
    	});
    });
  2. #2
  3. c0der
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2005
    Location
    Vancouver
    Posts
    664
    Rep Power
    159
    Code:
    	// Expand or collapse:
    	$("#Menu > li > a").click(function() {
    		$(this).find("+ ul").slideToggle("fast");
    		return false;
    	});
    Try that.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2004
    Posts
    292
    Rep Power
    15
    Superb

    That worked great, just need a fix now for the menu to collapse if you click another menu, so only one can be open at any one time.

    Thanks
    Barry
  6. #4
  7. CSKA Sofia
    Devshed Novice (500 - 999 posts)

    Join Date
    Apr 2003
    Location
    Germany / Bulgaria
    Posts
    571
    Rep Power
    127
    Now try that

    javascript Code:
    $(document).ready(function() {
    	// Collapse everything but the first menu:
    	$("#Menu > li > a").not(":AAA").find("+ ul").slideUp(1);
     
    	$("#Menu > li > a").click(function() {
    		// Collapse everything
    		$("#Menu > li > a").find("+ ul").slideUp(1);
    		// Expand or collapse
    		$(this).find("+ ul").slideToggle("fast");
    		return false;
    	});
    });
    Nikola Ivanov
    http://enikola.de
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2004
    Posts
    292
    Rep Power
    15
    Hi,

    That did not work, everytime I click the link, the menu appears and dissapears straight away, so not letting you actually select the drop down menu at all.

    Can you take a look.
  10. #6
  11. CSKA Sofia
    Devshed Novice (500 - 999 posts)

    Join Date
    Apr 2003
    Location
    Germany / Bulgaria
    Posts
    571
    Rep Power
    127
    I don't know, give me a link , try slideDown instaed of slideToggle
    Nikola Ivanov
    http://enikola.de

IMN logo majestic logo threadwatch logo seochat tools logo