Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Regular Coder
    Join Date
    Apr 2005
    Location
    Ireland
    Posts
    122
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Close and Open Drop down menu

    Hi

    Im creating a left side navagation menu. It contains three levels:
    Code:
     
    - Main Group
       - Sub Group
         - Sub Group Link
         - Sub Group Link
         ...
       - Sub Group
       ... 
     - Main Group
       - Sub Group
       ...
    When you open a 'Main Group' all other Open Groups should close and then the one selected should open "afterFinish Method form scriptacalous".

    I'm having some strange effects, it does close the previously opened 'Main Group' but does not open the selected 'Main Group'. After a few clicks it then strats going a little crazy opening and closing inncorrect 'Main Groups'.

    Maybe Ive got my binding wrong?

    Javascript:

    Code:
    ADMIN.DeptMenu = function () {
    	
    	$$('.subMenuToggler').each(function (toggler) {
    		toggler.observe('click', function(subMenu) {
    			Effect.toggle(subMenu, 'blind', {duration: 0.2, beforeStart:this.checkAllMenuStates.bind(this,subMenu)});
    		}.bind(this, toggler.next('ul')));			
    	}.bind(this));
    };
    
    ADMIN.DeptMenu.prototype.checkAllMenuStates = function (subMenu) {
    		
    	$$('.open').each( function ( elem ) {
    		$(elem).className = 'subMenuToggler closed';
    		Effect.toggle(elem.next('ul'), 'blind', {duration:0.2} ); 
    	}.bind(this));
    		
    	if ($(subMenu).style.display == 'none') {
    		$(subMenu).previous('a').className = 'subMenuToggler open';
    	}
    	else {
    		$(subMenu).previous('a').className = 'subMenuToggler closed';
    	}
    Html:

    Code:
    <ul>
    	<li class="menuItem">
    		<a class="subMenuToggler" href="javascript: void(0);">Line Management</a>	
    		
    		<ul class="groupSection" style="display: none">
    			<li class="subMenuItem">
    				<a class="subMenuToggler" href="javascript: void(0);">Transactions</a>		
    			
    				<ul class="subMenu">
    					<li class="subMenuItem"><a href="index.cfm?section=test">Change Bet Outcome</a></li>
    					<li class="subMenuItem"><a href="index.cfm?section=test">Reverse Voided Non Action Bets</a></li>
    				</ul>
    			</li>		
    			<li class="subMenuItem">
    				<a class="subMenuToggler" href="javascript: void(0);">Transactions</a>		
    			
    				<ul class="subMenu">
    					<li class="subMenuItem"><a href="index.cfm?section=test">Change Bet Outcome</a></li>
    					<li class="subMenuItem"><a href="index.cfm?section=test">Reverse Voided Non Action Bets</a></li>
    				</ul>
    			</li>	
    		</ul>
    	</li>	
    	<li class="menuItem">
    		<a class="subMenuToggler" href="javascript: void(0);">Line Management</a>	
    		
    		<ul class="groupSection" style="display: none">
    			<li class="subMenuItem">
    				<a class="subMenuToggler" href="javascript: void(0);">Transactions</a>		
    			
    				<ul class="subMenu">
    					<li class="subMenuItem"><a href="index.cfm?section=test">Change Bet Outcome</a></li>
    					<li class="subMenuItem"><a href="index.cfm?section=test">Reverse Voided Non Action Bets</a></li>
    				</ul>
    			</li>		
    			<li class="subMenuItem">
    				<a class="subMenuToggler" href="javascript: void(0);">Transactions</a>		
    			
    				<ul class="subMenu">
    					<li class="subMenuItem"><a href="index.cfm?section=test">Change Bet Outcome</a></li>
    					<li class="subMenuItem"><a href="index.cfm?section=test">Reverse Voided Non Action Bets</a></li>
    				</ul>
    			</li>	
    		</ul>
    	</li>	
    </ul>
    Last edited by tom123; 10-30-2009 at 07:17 PM.


 

Posting Permissions

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