Question

在下面的代码中，购买，销售和新菜单都有一些多级菜单需要打开onClick，当点击另一个菜单时，第一个多级菜单应该关闭，然后这个菜单应该打开一些过渡效果。

＆＃13;

$('#handle').on('click', function() {
  $('ul').toggleClass('showing');
});
$('li').on('click', function(e) {
  $(this).next('li li').toggleClass('showingg');
});

＆＃13;

@charset "utf-8";

/* CSS Document */

body {
  margin: 0;
  padding: 0;
}
.container {
  margin: 0;
  padding: 0;
}
#handle {
  display: none;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  -moz-transition: linear 0.4s;
}
li {
  float: left;
}
li a {
  text-decoration: none;
  display: block;
  padding: 15px;
  background: #0C9;
  color: #FFF;
  border-bottom: 1px solid #ccc;
}
li a:hover {
  background: #333;
}
li ul {
  display: none;
}
li:hover > ul {
  display: block;
  position: absolute;
}
li:hover li {
  float: none;
}
ul ul ul {
  left: 100%;
  top: 0;
}
ul:before,
ul:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
ul:after {
  clear: both;
}
@media screen and (max-width: 480px) {
  #handle {
    display: block;
    background: #066;
    color: #fff;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
    font-size: xx-large;
    cursor: pointer;
  }
  li {
    width: 100%;
    text-align: center;
    font-size: x-large;
  }
  ul {
    max-height: 0;
    overflow: hidden;
  }
  li a:hover {
    background: #0C9;
  }
  .showing {
    max-height: 200em;
  }
  li:hover > ul {
    position: relative;
  }
  /*li li {
		display:none;
	}*/
  li li:hover > ul {
    left: 0;
    position: relative;
  }
  li li a {
    background: #CCC;
  }
  .showingg {
    display: block;
    ;
  }
}

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
  <link rel="stylesheet" href="nav1.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
  <div class="container">
    <nav class="showing">
      <div id="handle">Menu</div>
      <ul id="nav">
        <li><a href="#">Available stock</a>
        </li>
        <li>
          <a href="#">Purchase +</a>
          <ul>
            <li>
              <a href="#">Purchase Return +</a>
              <ul>
                <li><a href="#">Return1</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Sale +</a>
          <ul>
            <li>
              <a href="#">Sale Return +</a>
              <ul>
                <li><a href="#">Return2</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Cash Recieve</a>
        </li>
        <li><a href="#">Cash Payment</a>
        </li>
        <li>
          <a href="#">New +</a>
          <ul>
            <li><a href="#">New Product</a>
            </li>
            <li><a href="#">New Supplier</a>
            </li>
            <li><a href="#">New Town</a>
            </li>
            <li><a href="#">New Customer</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Opening Stock</a>
        </li>
        <li><a href="#">Gate Pass</a>
        </li>
        <li><a href="#">Sale History</a>
        </li>
      </ul>
    </nav>
  </div>

</body>

</html>

＆＃13;

需要使用jQuery单击显示响应菜单

0 个答案: