jquey想实现手风琴效果。。写了一半不会了。

2018-09-27 03:33:48 798 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

jquery实现手风琴效果用jquery来实现手风琴效果是非常简单的哦首先来看看效果上代码 html <div id="acc"> <ul> <li class="active"> <h3 class="active">红玫瑰</h3> <div><img src="img/bg1.jpg" /></div> </li> 阅读详情

html代码如下：



   <div  style="width: 250px; border-bottom: 1px solid #e9e8e8; height: 351px; overflow: hidden;">

                <div class="div_u1">

                    <a class="ppt_a a_active" href="javascript:void(0)"><i class="p_i"></i>北京</a>

                    <ul class="hot_list" style="height: 206px;">

                        <li class="hot_li"><a target="_blank" href="#">北京1</a></li>

                        <li class="hot_li"><a target="_blank" href="#">北京2</a></li>

                        <li class="hot_li"><a target="_blank" href="#">北京3</a></li>

                        <li class="hot_li"><a target="_blank" href="#">北京4</a></li>

                        <li class="hot_li"><a target="_blank" href="#">北京5</a></li>

                        <a href="#" style="display: block; line-height: 35px; border-bottom: 1px solid #e9e8e8; padding-left: 15px; color: #3db4ec;">更多》</a>

                    </ul>

                </div>

                <div class="div_u1">

                    <a class="ppt_a" href="javascript:void(0)"><i class="p_i"></i>上海</a>

                    <ul class="hot_list" style="display: none; height: 206px;">

                        <li class="hot_li"><a target="_blank" href="#">上海1</a></li>

                        <li class="hot_li"><a target="_blank" href="#">上海2</a></li>

                        <a href="#" style="display: block; line-height: 35px; border-bottom: 1px solid #e9e8e8; padding-left: 15px; color: #3db4ec;">更多》</a>

                    </ul>

                </div>

                <div class="div_u1">

                    <a class="ppt_a" href="javascript:void(0)"><i class="p_i"></i>江苏</a>

                    <ul class="hot_list" style="display: none; height: 206px;">

                        <li class="hot_li"><a target="_blank" href="#">江苏1</a></li>

                        <li class="hot_li"><a target="_blank" href="#">江苏2</a></li>

                        <a href="#" style="display: block; line-height: 35px; border-bottom: 1px solid #e9e8e8; padding-left: 15px; color: #3db4ec;">更多》</a>

                    </ul>

                </div>

                <div class="div_u1">

                    <a class="ppt_a" href="javascript:void(0)"><i class="p_i"></i>深圳</a>

                    <ul class="hot_list" style="display: none; height: 206px;">

                        <li class="hot_li"><a target="_blank" href="#">深圳1</a></li>

                        <li class="hot_li"><a target="_blank" href="#">深圳222</a></li>

                        <a href="#" style="display: block; line-height: 35px; border-bottom: 1px solid #e9e8e8; padding-left: 15px; color: #3db4ec;">更多》</a>

                    </ul>

                </div>

            </div>

想实现点击上海菜单显示上海菜单下面的子菜单，隐藏掉除上海以外的子菜单，并且给当强点击的菜单加上a_active 样式，其他的去掉a_active样式。



  $(".ppt_a").click(function () {

            $(this).addClass("a_active");

...全文

前端最基础的效果----手风琴效果，用JS实现！！！先展示一下效果图：点击手风琴，会下拉出内容，点击+ - 也会有效果，下面展示代码：这是css样式： <style> *{ padding: 0; margin: 0; } ul,li,ol{ list-style: none; } .wrap{ width: 400px; m.. 阅读详情

nitaiyoucala

JavaScript 87,984 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

Tong0068 2018-10-06

打赏
举报

为何要执着于自己手写，用SuperSlide插件不是会更好吗

hdz0415 2018-09-29

打赏
举报

左右显示，点击菜单，添加tab页，对应内容显示，右键点击tab页，出现菜单，可以全部关闭tab页，整个页面，就一个html模板

商嘉航 2018-09-27

打赏
举报

歪步哒哒哒 2018-09-27

打赏
举报

检查一下有没有报错，另外jQuery引入路径对不对，我这边是可以出现效果的，可是我不知道怎么弄动图，所以看不了效果

Logerlink 2018-09-27

打赏
举报

补充一下



			$(function(){

				$(".ppt_a").click(function(){

					$('a.a_active').removeClass('a_active');

	                $(this).addClass("a_active").next().stop().slideToggle();

	                $(this).parents('.div_u1').siblings().children('.hot_list').stop().slideUp();

            	})

			})

nitaiyoucala 2018-09-27

打赏
举报

引用 4 楼 weixin_43186680 的回复:

没法上下滑动

歪步哒哒哒 2018-09-27

打赏
举报

歪步哒哒哒 2018-09-27

打赏
举报

<!DOCTYPE html>

<html>



	<head>

		<meta charset="utf-8" />

		<title></title>

		<style>

			.a_active{

				color: red !important;

			}

		</style>

	</head>



	<body>

		<br data-filtered="filtered">

		<div style="width: 250px; border-bottom: 1px solid #e9e8e8; height: 351px; overflow: hidden;"><br data-filtered="filtered">

			<div class="div_u1"><br data-filtered="filtered">

				<a class="ppt_a a_active" href="javascript:void(0)"><i class="p_i"></i>北京</a><br data-filtered="filtered">

				<ul class="hot_list" style="height: 206px;"><br data-filtered="filtered">

					<li class="hot_li">

						<a target="_blank" href="#">北京1</a>

					</li><br data-filtered="filtered">

					<li class="hot_li">

						<a target="_blank" href="#">北京2</a>

					</li><br data-filtered="filtered">

					<li class="hot_li">

						<a target="_blank" href="#">北京3</a>

					</li><br data-filtered="filtered">

					<li class="hot_li">

						<a target="_blank" href="#">北京4</a>

					</li><br data-filtered="filtered">

					<li class="hot_li">

						<a target="_blank" href="#">北京5</a>

					</li><br data-filtered="filtered">

					<a href="#" style="display: block; line-height: 35px; border-bottom: 1px solid #e9e8e8; padding-left: 15px; color: #3db4ec;">更多》</a><br data-filtered="filtered">

				</ul><br data-filtered="filtered">

			</div><br data-filtered="filtered">

			<div class="div_u1"><br data-filtered="filtered">

				<a class="ppt_a" href="javascript:void(0)"><i class="p_i"></i>上海</a><br data-filtered="filtered">

				<ul class="hot_list" style="display: none; height: 206px;"><br data-filtered="filtered">

					<li class="hot_li">

						<a target="_blank" href="#">上海1</a>

					</li><br data-filtered="filtered">

					<li class="hot_li">

						<a target="_blank" href="#">上海2</a>

					</li><br data-filtered="filtered">

					<a href="#" style="display: block; line-height: 35px; border-bottom: 1px solid #e9e8e8; padding-left: 15px; color: #3db4ec;">更多》</a><br data-filtered="filtered">

				</ul><br data-filtered="filtered">

			</div><br data-filtered="filtered">

			<div class="div_u1"><br data-filtered="filtered">

				<a class="ppt_a" href="javascript:void(0)"><i class="p_i"></i>江苏</a><br data-filtered="filtered">

				<ul class="hot_list" style="display: none; height: 206px;"><br data-filtered="filtered">

					<li class="hot_li">

						<a target="_blank" href="#">江苏1</a>

					</li><br data-filtered="filtered">

					<li class="hot_li">

						<a target="_blank" href="#">江苏2</a>

					</li><br data-filtered="filtered">

					<a href="#" style="display: block; line-height: 35px; border-bottom: 1px solid #e9e8e8; padding-left: 15px; color: #3db4ec;">更多》</a><br data-filtered="filtered">

				</ul><br data-filtered="filtered">

			</div><br data-filtered="filtered">

			<div class="div_u1"><br data-filtered="filtered">

				<a class="ppt_a" href="javascript:void(0)"><i class="p_i"></i>深圳</a><br data-filtered="filtered">

				<ul class="hot_list" style="display: none; height: 206px;"><br data-filtered="filtered">

					<li class="hot_li">

						<a target="_blank" href="#">深圳1</a>

					</li><br data-filtered="filtered">

					<li class="hot_li">

						<a target="_blank" href="#">深圳222</a>

					</li><br data-filtered="filtered">

					<a href="#" style="display: block; line-height: 35px; border-bottom: 1px solid #e9e8e8; padding-left: 15px; color: #3db4ec;">更多》</a><br data-filtered="filtered">

				</ul><br data-filtered="filtered">

			</div><br data-filtered="filtered">

		</div>

	</body>

	<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>

	<script>

		$(function(){

			$(".ppt_a").click(function(){

				$(this).addClass("a_active").next().next().stop().slideToggle();

				$(this).parent().siblings().find("a").removeClass("a_active").next().next().stop().slideUp();

			})

		})

	</script>

</html>

这是我写的，你是hot_list这个div无法上划隐藏么？

nitaiyoucala 2018-09-27

打赏
举报

引用 1 楼 weixin_43186680 的回复:

自己写的笨方法，你可以参考一下

$(function(){

			$(".ppt_a").click(function(){

				$(this).addClass("a_active").next().next().stop().slideToggle();

				$(this).parent().siblings().find("a").removeClass("a_active").next().next().stop().slideUp();

			})

		})

谢谢，但是那个div显示隐藏好像没起作用。。hot_list

歪步哒哒哒 2018-09-27

打赏
举报

自己写的笨方法，你可以参考一下

$(function(){

			$(".ppt_a").click(function(){

				$(this).addClass("a_active").next().next().stop().slideToggle();

				$(this).parent().siblings().find("a").removeClass("a_active").next().next().stop().slideUp();

			})

		})

jquey想实现手风琴效果。。写了一半不会了。

相关推荐