Hide sub menu on page load jquery

0
votes

I have created a vertical menu with sub menus. I have used a unorder list. When my page loads it shows the top level menu and submenu but when I click the top level it will hide the submenu which works fine for click event. I would like my page to only show the top level menu and only once clicked to will display the sub menu. Am new to jquery your help would be greatly appreciated.

$(function() {

  $('#menu li a').click(function(event) {
    var elem = $(this).next();
    if (elem.is('ul')) {
      event.preventDefault();
      $('#menu ul:visible').not(elem).slideUp();
      elem.slideToggle();
    }
  });
});
#menu {
  padding: 0;
  margin: 0;
  list-style-type: none;
  font-size: 13px;
  color: #717171;
  width: 100%;
}

#menu li {
  border-bottom: 1px solid #eeeeee;
}

#menu li a:hover {
  color: White;
  background-color: #ffcc00;
}

#menu a:link {
  color: #717171;
  text-decoration: none;
  display: block;
  padding: 7px 10px;
}

#menu a:hover {
  color: White;
}

#menu li ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  background-color: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
  <li><a href="#">Top Menu 1</a>
    <ul>
      <li>
        <a href="#" target="_parent">Menu 1</a>
      </li>
      <li>
        <a href="#" target="_parent">Menu 2</a>
      </li>
      <li>
        <a href="#" target="_parent">Menu 3</a>
      </li>
    </ul>
  </li>
</ul>
<ul id="menu">
  <li><a href="#">Top Menu 2</a>
    <ul>
      <li>
        <a href="#" target="_parent">Menu 1</a>
      </li>
    </ul>
  </li>
</ul>
<ul id="menu">
  <li><a href="#">Top Menu 3</a>
    <ul>
      <li>
        <a href="#" target="_parent">Menu 1</a>
      </li>
    </ul>
  </li>
</ul>
<ul id="menu">
  <li><a href="#">Top Menu 4</a>
    <ul>
      <li>
        <a href="#" target="_parent">Menu 1</a>
      </li>
    </ul>
  </li>
</ul>
2
javascriptjqueryhtmlcssmenu

2 Answers

0
votes

css can do this without javascript. Set ul sub menu to display: none.

#menu li ul
{
     padding:0;
     margin:0;
     list-style-type:none;
     background-color:#999;
     display: none;
}

Demo

0
votes

Hide the sub-menu to start with CSS.

#menu li ul
{
    display: none; /* hide sub uls */
    padding:0;
    margin:0;
    list-style-type:none;
    background-color:#999;
}