隐藏页面上的子菜单加载jquery

Question

我创建了一个带子菜单的垂直菜单。我使用了一个无序列表。当我的页面加载时，它会显示顶级菜单和子菜单，但是当我点击顶层时，它将隐藏适用于点击事件的子菜单。我希望我的页面只显示顶级菜单，只有一次点击才会显示子菜单。非常感谢jquery你的帮助。

＆＃13;

＆＃13;

$(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();
    }
  });
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

隐藏子菜单以使用CSS开始。

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

Answer 2

css可以在没有javascript的情况下执行此操作。将ul子菜单设为display: none。

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

Demo