SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Triggering JQUERY Collapsible menu class

    Hello, I am trying to implement the JQUERY collapsible menu pluggin and it works fine, however I need to be able to show the menu in its expanded state when you are into the corresponding section.

    I am using the Jquery latest library with the following script:

    HTML Code:
    <script type="text/javascript" src="js/jquery.js"></script>
          <script>
      $(document).ready(function(){
      			// Expand only the active menu, which is determined by the class name
    			$("#menu > li > a[@class=expanded] ").find("+ ul").slideToggle("medium");
    
    			// Toggle the selected menu's class and expand or collapse the menu
    			$("#menu > li > a").click(function() {
    				$(this).toggleClass("expanded").toggleClass("collapsed").find("+ ul").slideToggle("medium");
    			});
    	
    	//this class is not being triggered	
    	$("#home > a").addClass('expanded');
      });
      </script>
    HTML for the output:

    HTML Code:
    <ul id="menu">
    	<li id="home"><a>Homepage</a>
    		<ul>
    			<li><a href="#">Link A-A</a>
    				<ul>
    					<li><a href="#">Link A-A-A</a></li>
    					<li><a href="#">Link A-A-B</a></li>
    				</ul>
    			</li>
    			<li><a href="#">Link A-B</a></li>
    			<li><a href="#">Link A-C</a></li>
    			<li><a href="#">Link A-D</a></li>
    		</ul>
    	</li>
    	<li><a>Section B</a>
    		<ul>
    			<li><a href="#">Link B-A</a>
    				<ul>
    					<li><a href="#">Link B-A-A</a></li>
    					<li><a href="#">Link B-A-B</a></li>
    					<li><a href="#">Link B-A-C</a></li>
    				</ul>
    			</li>
    			<li><a href="#">Link B-B</a>
    				<ul>
    					<li><a href="#">Link B-B-A</a></li>
    					<li><a href="#">Link B-B-B</a></li>
    				</ul>
    			</li>
    			<li><a href="#">Link B-C</a></li>
    			<li><a href="#">Link B-D</a></li>
    		</ul>
    	</li>
    	<li><a >Section C</a>
    		<ul>
    			<li><a href="#">Link C-A</a></li>
    			<li><a href="#">Link C-B</a></li>
    			<li><a href="#">Link C-C</a></li>
    			<li><a href="#">Link C-D</a></li>
    		</ul>
    	</li>
    </ul>
    I want the 'collapsible' class to be applied to the first <a> child of #home with the following line:

    HTML Code:
    $("#home > a").addClass('expanded');
    However this is not working and I believe that it is because the expanded class is tied in to a function because I have tested adding a normal 'cosmetic' class and it works.

    Would anyone here be able to tell me how I can trigger the expanded state of #home ?

    Cheers

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Once again I fixed my own bug by using a JQuery reference site and the library's wonderful simplicity and logic:

    So if anyone is trying to achieve the same thing here it is:

    HTML Code:
    $("#home > a").toggleClass("expanded").find("+ ul").css("display","block");

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But I have a logic that I can figure out.

    I need to target the <a> elements of the nested <ul's> and also highlight them with a class of 'red' depending if you are on the page they represent.

    I tried using
    :nth-child(2) and children(2) for example but it did not work. I cannot figure out the syntax for it.

    Any clues?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •