javascript - 显示嵌套 uls 的正确方法是什么？

Question

我正在尝试为移动设备创建一个嵌套的侧边栏菜单。当我单击 span.big 时，我希望下一个 ul 变得可见。所以我调用了 .next()。现在嵌套的 ul 确实显示了，但问题是 li 下面的 li 没有向下移动，这意味着 ul 与 li 重叠。

(function($) {
  $('.big').click(function() {
    $(this).next();
  });
})(jQuery);

如何让里正确向下移动？

    (function($) {

      $('.big').click(function() {
        $(this).next();
      });

    })(jQuery);

#cssmenu {
  background-color: #333333;
  height: 100%;
  font-family: Arvo, serif;
  font-size: 17px;
  font-weight: normal;
  color: white;
}
#cssmenu ul {
  list-style: none;
  padding-left: 0;
}
#cssmenu li {
  height: 50px;
}
#cssmenu ul>li {
  padding-top: 13px;
  border-bottom: 1px solid rgba(120, 120, 120, 0.2)
}
#cssmenu ul>li>a {
  color: white;
  margin-left: 15px;
}
#cssmenu ul>li>ul {
  display: none;
}
#cssmenu span.big {
  float: right;
  border-left: 1px solid rgba(120, 120, 120, 0.2);
  border-left: 1px solid rgba(120, 120, 120, 0.2);
  height: 50px;
  width: 50px;
  margin-top: -13px;
  font-size: 1.5em;
  padding-left: 17px;
  padding-top: 5px;
}
#cssmenu span:hover {
  background-color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-nav">
  <div id='cssmenu'>
    <ul>
      <li><a href='#'>Home</a>
      </li>
      <li class='active'><a href='#'>Products</a>
        <span class="big">+</span>
        <ul>
          <li><a href='#'>Product 1</a>
            <ul>
              <li><a href='#'>Sub Product</a>
              </li>
              <li><a href='#'>Sub Product</a>
              </li>
            </ul>
          </li>
          <li><a href='#'>Product 2</a>
            <ul>
              <li><a href='#'>Sub Product</a>
              </li>
              <li><a href='#'>Sub Product</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'>About</a>
      </li>
      <li><a href='#'>Contact</a>
      </li>
    </ul>
  </div>
</div>

Answer 1

li的高度被限制，子菜单无法正常显示。

此外，您没有使用 JQuery next 选择任何内容声明。

如评论中所述，如果 li 需要高度, 你可以替换 min-height对于 height .

$(document).ready(function() {
  $('.big').click(function() {
    $(this).next('ul').slideToggle();
  });
});

* {
  margin: 0;
  box-sizing: border-box;
}
#cssmenu {
  background-color: #333333;
  height: 100%;
  font-family: Arvo, serif;
  font-size: 17px;
  font-weight: normal;
  color: white;
}
#cssmenu ul {
  list-style: none;
  padding-left: 0;
}
#cssmenu >ul > li {
  min-height: 50px;
}
#cssmenu ul>li {
  padding-top: 13px;
  border-bottom: 1px solid rgba(120, 120, 120, 0.2)
}
#cssmenu ul>li>a {
  color: white;
  margin-left: 15px;
}
#cssmenu ul>li>ul {
  display: none;
}
#cssmenu span.big {
  height: 50px;
  float: right;
  border-left: 1px solid rgba(120, 120, 120, 0.2);
  border-left: 1px solid rgba(120, 120, 120, 0.2);
  width: 50px;
  margin-top: -13px;
  font-size: 1.5em;
  padding-left: 17px;
  padding-top: 5px;
}
#cssmenu span:hover {
  background-color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-nav">
  <div id='cssmenu'>
    <ul>
      <li><a href='#'>Home</a>
      </li>
      <li class='active'><a href='#'>Products</a>
        <span class="big">+</span>
        <ul>
          <li><a href='#'>Product 1</a>
            <ul>
              <li><a href='#'>Sub Product</a>
              </li>
              <li><a href='#'>Sub Product</a>
              </li>
            </ul>
          </li>
          <li><a href='#'>Product 2</a>
            <ul>
              <li><a href='#'>Sub Product</a>
              </li>
              <li><a href='#'>Sub Product</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'>About</a>
      </li>
      <li><a href='#'>Contact</a>
      </li>
    </ul>
  </div>
</div>