jQuery手风琴子菜单未扩展

Question

我正在尝试使用jQuery执行手风琴。问题是我的subchildren没有显示，或者单击该子菜单面板后它没有展开。

这是我单击CLOTHING > MEN'S CLOTHING时要查看的菜单结构：

\-CLOTHING
  \-MEN'S CLOTHING
    \-SHIRTS
    \-POLO
    \-JACKETS

但是我只得到这个：

\-CLOTHING
  \-MEN'S CLOTHING
    \-SHIRTS

这是我的问题fiddle。

Answer 1

您没有看到所有子菜单项，因为您没有更新父<ul>上的最大高度。例如，打开“服装”，子菜单<ul>的最大高度为101px。然后，当您打开“男装”时，“服装” <ul>会保持最大高度101px，但实际上现在更高了，因为您要打开更多的子孩子。您需要环回父<ul>和开头<ul>，以更新所有最大高度，而不仅是要打开的<ul>。< / p>

仅供参考：鉴于您正在使用jQuery，则可以大大简化JS并执行以下操作：

$(function() {
  $(".menu_top_nav li").click(function(e) {
    e.stopImmediatePropagation();

    if ($("> ul", this).length) {
      $("> ul", this).slideToggle();
    }
  });
});

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,900');
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 23px;
  font-weight: 400;
  background: #FFFFFF;
  color: #1e1e27;
}

div {
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul {
  list-style: none;
  margin-bottom: 0px;
}

p {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 500;
  color: #989898;
  -webkit-font-smoothing: antialiased;
  -webkit-text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
  text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}

p a {
  display: inline;
  position: relative;
  color: inherit;
  border-bottom: solid 2px #fde0db;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

a,
a:hover,
a:visited,
a:active,
a:link {
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
  text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}

p a:active {
  position: relative;
  color: #FF6347;
}

p a:hover {
  color: #FF6347;
  background: #fde0db;
}

p a:hover::after {
  opacity: 0.2;
}

::selection {
  background: #fde0db;
  color: #FF6347;
}

p::selection {
  background: #fde0db;
}

h1 {
  font-size: 72px;
}

h2 {
  font-size: 40px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #282828;
  -webkit-font-smoothing: antialiased;
  -webkit-text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
  text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}

h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection {}

::-webkit-input-placeholder {
  font-size: 16px !important;
  font-weight: 500;
  color: #777777 !important;
}

:-moz-placeholder
/* older Firefox*/

{
  font-size: 16px !important;
  font-weight: 500;
  color: #777777 !important;
}

::-moz-placeholder
/* Firefox 19+ */

{
  font-size: 16px !important;
  font-weight: 500;
  color: #777777 !important;
}

:-ms-input-placeholder {
  font-size: 16px !important;
  font-weight: 500;
  color: #777777 !important;
}

::input-placeholder {
  font-size: 16px !important;
  font-weight: 500;
  color: #777777 !important;
}

section {
  display: block;
  position: relative;
  box-sizing: border-box;
}

.clear {
  clear: both;
}

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

.float_left {
  float: left;
}

.float_right {
  float: right;
}

.fill_height {
  height: 100%;
}

.super_container {
  width: 100%;
  overflow: hidden;
}


/*********************************
Menu
*********************************/

.menu_item {
  display: block;
  position: relative;
  border-bottom: solid 1px #b5aec4;
  vertical-align: middle;
}

.menu_item>a {
  display: block;
  color: #1e1e27;
  font-weight: 500;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  text-transform: uppercase;
}

.menu_item>a:hover {
  color: #b5aec4;
}

.menu_item>a>i {
  margin-left: 8px;
}


/* REMOVED
.menu_item.active .menu_selection
{
	display: block;
	visibility: visible;
	opacity: 1;
}
*/

.menu_selection {
  margin: 0;
  width: 100%;
  display: none;
  /* REMOVED
	max-height: 0;
	overflow: hidden;
	*/
  z-index: 1;
  /* REMOVED
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	*/
}

.menu_selection li {
  padding-left: 10px;
  padding-right: 10px;
  line-height: 50px;
}

.menu_selection li a {
  display: block;
  color: #232530;
  border-bottom: solid 1px #dddddd;
  font-size: 13px;
  text-transform: uppercase;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: all 0.3s ease;
}

.menu_selection li a:hover {
  color: #b5aec4;
}

.menu_selection li:last-child a {
  border-bottom: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu_top_nav">
  <li class="menu_item has-children">
    <a href="#" class="submenu">
      <!-- Populate by javascript -->
    </a>
    <ul class="menu_selection">
      <!-- Populate by javascript -->
    </ul>
  </li>
  <li class="menu_item"><a href="#">Home</a></li>
  <li class="menu_item has-children"><a class="submenu">CLOTHING <i class="fa fa-angle-down"></i></a>
    <ul class="menu_selection">
      <li class="submenu_item has-subchildren"><a class="submenu">MEN'S CLOTHING <i class="fa fa-angle-down"></i></a>
        <ul class="menu_selection">
          <li><a href="#">TSHIRTS</a></li>
          <li><a href="#">POLO SHIRTS</a></li>
          <li><a href="#">JACKETS</a></li>
        </ul>
      </li>
      <li class="submenu_item has-subchildren"><a class="submenu">WOMEN'S CLOTHING <i class="fa fa-angle-down"></i></a>
        <ul class="menu_selection">
          <li><a href="#">DRESSES</a></li>
          <li><a href="#">SKIRTS</a></li>
          <li><a href="#">TOPS</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

我希望这会有所帮助。