加载时隐藏ul元素，点击时显示

Hidden ul elements on load, display on click

本文关键字：显示 元素 隐藏 ul 加载      更新时间：2023-09-26

我正在尝试创建某种菜单。我已经设法创建"崩溃"ul元素，但无法弄清楚如何设置ul元素隐藏在加载

         <ul>
        <li class="error">Displayed</li>
        <ul>
           <li class="error">Hidden</li>
              <ul>
                 <li class="error">
                    <a href="test.html">Hidden</a>
                 </li>
              </ul>              
        </ul>
    </ul>
jquery 

$(".error").click(function () {
$(this).next("ul").toggle("slow");});

这是我的示例与折叠ul元素http://jsbin.com/povafivu/1/edit?html,js,output

谢谢

为什么不用css默认隐藏呢?

ul > ul > li {
  display: none;
}

使用jquery:

$(document).ready(function(){
  $("ul").children('.error').next('ul').hide();
});

按钮点击显示2和和3rd ul

$("button").click(function(){
 $("ul").children('.error').next('ul').toggle("slow").next('ul').toggle("slow");
})

按钮代码<button>test</button> DEMO

使用css3

ul > ul > li:nth-of-type(1)
    {
 display:none;
    }

最初只需将ul元素的显示设置为none。并在需要时切换它。

相关文章：