jquery .first() ——树形菜单结构中默认显示第一个ul

苦茶子12138

于 2022-11-09 09:52:40 发布

阅读量156

点赞数

文章标签： jquery javascript html

本文链接：https://blog.csdn.net/cqn2bd2b/article/details/127748479

版权

jQuery 菜单 slideToggle 事件处理前端开发

关键词由CSDN通过智能技术生成

jquery code：

$(document).ready(function () {

           //将二级菜单设置为不可见
           $(".FAQlist").css("display", "none");
           $(".FAQlist").first().css("display", "block");
           //单击一级菜单触发的事件
           $(".bartitleFAQ").click(function () {
               $(this).next(".FAQlist").slideToggle("fast"); //当前一级菜单的二级菜单设置为可见

           })

})

页面code：

<div class="bartitleFAQ" ><a href="#"><span style=" font-size:13px; color:#0066CC; font-weight:bold;">数据申请</span></a></div>
               <div class="FAQlist">
                    <ul class="ul1" >
                            <li ><a href="#">已完成申请</a></li>
                            <li ><a href="#">未完成申请</a></li>
                   </ul>
              </div>
      <div class="bartitleFAQ"><a href="#"><span style=" font-size:13px; color:#0066CC;font-weight:bold;">数据预定</span></a></div>
            <div class="FAQlist">
                <ul>
                         <li><a href="#">已处理预定</a></li>
                         <li><a href="#">待处理预定</a></li>
               </ul>
          </div>
      <div class="bartitleFAQ"><a href="#"><span style=" font-size:13px; color:#0066CC;font-weight:bold;">上传数据</span></a></div>
            <div class="FAQlist">
                <ul>
                         <li><a href="#">已处理预定</a></li>
                         <li><a href="#">待处理预定</a></li>
               </ul>
           </div>