SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member lionking2's Avatar
    Join Date
    May 2009
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I want to close all open lists, which contain submenus

    hello everybody

    I have a list like this


    Code:
      
    <ul id="main_menu">
            <li><a href="#">Comments</a></li>
            <li><a href="#">Advertising</a>
                <ul>
                    <li><a href="#">edit/delete  ads</a></li>
                    <li><a href="#">Add Ads</a></li>
                </ul>
            </li>
            <li><a href="#">Groups</a></li>
            <li><a href="#">Members</a>
                <ul>
                    <li><a href="#">Edit /  Delete Member</a></li>
                    <li><a href="#">Add Member</a></li>
                </ul>
            </li>
            <li><a href="#">Photo</a>
                <ul>
                    <li><a href="#">edit /  Delete Photo</a></li>
                    <li><a href="#">Add a  picture</a></li>
                </ul>
            </li>
            <li><a href="#">Sections</a>
                <ul>
                    <li><a href="#">Edit / Delete  section</a></li>
                    <li><a href="#">Add  Section</a></li>
                </ul>
            </li>
            <li><a href="#">General  Settings</a></li>
            <li><a href="#">Home</a></li>
        </ul>
    This list contains lists of 8, including 4 lists contain children (Advertising,Members,Photo,Sections)

    And I've written this code but did not work very well


    Code:
    function MainMenu(item){
        var MenuItems = document.getElementById('main_menu');
        for (var i = 0; i < MenuItems.children.length; i++) {
            MenuItems.children[i].children[1].style.display = "none";
        }
        item.children[1].style.display = "block";
    }


    What i needed is when i press a list containing the submenus Close all open lists Then open this menu

  2. #2
    Learning... tahirjadoon's Avatar
    Join Date
    Jan 2003
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a look at this, i think it is very close to what you are looking for:
    http://www.alistapart.com/articles/horizdropdowns/
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  3. #3
    Learning... tahirjadoon's Avatar
    Join Date
    Jan 2003
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  4. #4
    SitePoint Member lionking2's Avatar
    Join Date
    May 2009
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Mr tahirjadoon for help, good examples

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want a plain vanilla JavaScript solution, here 's one. No additions needed to your markup. Tested and working in all browsers. Note that an open list will close when its top link is clicked again. And it starts with all sublists closed.

    The children array property has only recently become supported in some browsers (e.g. FF 3.5), so I avoided its use here. It is better for the moment to use properties like childNodes, parentNode, etc, which have been well supported in all browsers.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Test Accordion</title>
    <script type="text/javascript">
    var ULitems = new Array();  	// store ULs having a submenu
    var opened = null;		// remember last one opened
    
    function init() {
      // Get submenu ULs; make invisible; add onclick handler to A siblings
      ULitems = document.getElementById('main_menu').getElementsByTagName("ul");
      for (var i=0; i<ULitems.length; i++) {
        ULitems[i].style.display = "none";
        var sibA = findSibling(ULitems[i], "A");
        if (sibA) addEvent(sibA, "click", openThisMenu);
      }
    }
    
    function openThisMenu(e) {
      // Open a submenu UL sibling (if any) to the clicked top link
      if (opened) opened.style.display = "none";
      var e = e || window.event;
      var thisLink = (e.target) ? e.target: e.srcElement;
      var hasMenu = findSibling(thisLink, "UL");
      if (hasMenu) {
        if (hasMenu == opened)
          hasMenu.style.display = "none";
        else hasMenu.style.display = "block";
        opened = hasMenu;
      }
      return false;
    }
    
    function findSibling(obj,tag) {
      var sn = obj.parentNode.childNodes;
      for (var n=0; n<sn.length; n++) {
        if (sn[n].nodeName == tag) return sn[n];
      }
      return false;
    }
    
    function addEvent(obj,evt,func) {
      if (obj.addEventListener) {
    	obj.addEventListener(evt,func,false);
      } else if (obj.attachEvent) {
    	obj.attachEvent('on'+evt, func);
      } else {
    	obj['on'+evt] = func;
      }
    }
    
    window.onload = init;
    </script>
    
    <style type="text/css">
    body               { width: 100%; }
    ul#main_menu       { width: 20%; }
    ul#main_menu li ul { margin-left: 10px; background: #EEEEEE; }
    </style>
    
    </head>
    <body>
    <ul id="main_menu">
            <li><a href="#">Comments</a></li>
    
            <li><a href="#">Advertising</a>
                <ul>
                    <li><a href="#">Edit/Delete Ads</a></li>
                    <li><a href="#">Add Ads</a></li>
                </ul>
            </li>
    
           <li><a href="#">Groups</a></li>
    
           <li><a href="#">Members</a>
                <ul>
                    <li><a href="#">Edit/Delete Member</a></li>
                    <li><a href="#">Add Member</a></li>
                </ul>
            </li>
    
           <li><a href="#">Photo</a>
                <ul>
                    <li><a href="#">Edit/Delete Photo</a></li>
                    <li><a href="#">Add a  picture</a></li>
                </ul>
            </li>
    
            <li><a href="#">Sections</a>
                <ul>
                    <li><a href="#">Edit/Delete Section</a></li>
                    <li><a href="#">Add Section</a></li>
                </ul>
            </li>
    
            <li><a href="#">General Settings</a></li>
    
            <li><a href="#">Home</a></li>
    </ul>
    </body>
    </html>


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
  •