js 点击展示或隐藏（同class多条数据）

最新推荐文章于 2024-09-06 11:32:45 发布

勉后之幸

最新推荐文章于 2024-09-06 11:32:45 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41219388/article/details/102507667

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现下拉菜单的方法。通过点击一级分类，可以显示或隐藏其对应的二级分类，利用了jQuery的slideToggle()方法实现动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，html页面代码，仅供参考

<div class="left left_content clearfix">
    <ul class="shop_type">
        <li id="tar_title" class="class_first" ><a href="#" class="">一级分类</a></li>
	<ul class="shop_type">
            <li id=""><a href="#" class="class_second">二级分类</a></li>
	    <li><a href="#" class="class_second">二级分类</a></li>
	</ul>	
    </ul>
    <ul class="shop_type liback">
        <li  class="class_first"><a href="#" class="hover">一级分类</a></li>
	<ul class="shop_type">
	    <li ><a href="#" class="class_second">二级分类</a></li>
	    <li><a href="#" class="class_second">二级分类</a></li>
	</ul>		
    </ul>
</div>

js代码

<script>
    $(document).ready(function(){
        $(".class_first").click(function(){
            $(this).siblings('ul').slideToggle();			
	})
    })
</script>