显示嵌套uls的正确方式是什么

What is the correct way to display nested uls?

本文关键字：方式 是什么 嵌套 uls 显示      更新时间：2023-09-26

我正在尝试为移动设备创建一个嵌套的侧边栏菜单。当我点击span.big时，我希望下一个ul变得可见。所以我叫.next()。现在嵌套的ul确实显示了，但是问题是下面的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>

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>

在jQuery中，next()只用于选择元素的下一个同级。这意味着您的javascript代码没有执行任何操作，因为您没有使用next() 的结果

jsFiddle：https://jsfiddle.net/6yesewh9/

修复程序是将li css height更改为min-height

#cssmenu li{
    min-height:50px;
}

此外，我还将您的.next更改为在jQuery代码

中使用"兄弟姐妹"
相关文章：