jquery 手风琴子菜单未展开

Question

我正在尝试使用 jQuery 演奏手风琴。问题是我的 subchildren 没有显示，或者我会说当我点击它时子菜单面板没有展开。

这是我点击CLOTHING > MEN'S CLOTHING想看到的菜单结构：

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

但我只得到这个：

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

这是我的问题 fiddle。

Answer 1

您没有看到所有子菜单项，因为您没有更新 parent <ul> 上的 max-heights。例如，您打开 "Clothing" 并且子菜单 <ul> 获得 101px 的 max-height。然后当你打开 "Men's Clothing" 时，"Clothing" <ul> 保持 101px 的 max-height 但它现在实际上更高了，因为你打开更多 sub-children。您需要循环返回 parent <ul> 以及开头 <ul> 以更新所有 max-heights，而不仅仅是 <ul>你打开了。

仅供参考：鉴于您正在使用 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>

希望对您有所帮助。

jquery 手风琴子菜单未展开

jquery Accordion submenus not expanding

jquery

jquery-ui

accordion

jquery-ui-accordion