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

nitaiyoucala 2018-09-27 03:33:48
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");



...全文
696 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
Tong0068 2018-10-06
  • 打赏
  • 举报
 回复
为何要执着于自己手写，用SuperSlide插件不是会更好吗
商嘉航 2018-09-27
  • 打赏
  • 举报
 回复
<script type="text/javascript" src="../js/jquery-1.10.2.js" ></script>
<style>
*{
margin: 0;
padding: 0;
}
p{
display: none;
}
</style>
</head>
<body>
<div>
<div>
<h3>标题一</h3>
<p>fsjiozsjiofhiofjiaosfoijfioaf</p>
</div>
<div>
<h3>标题二</h3>
<p>fsjiozsjiofhiofjiaosfoijfioaf</p>
</div>
<div>
<h3>标题三</h3>
<p>fsjiozsjiofhiofjiaosfoijfioaf</p>
</div>
<div>
<h3>标题四</h3>
<p>fsjiozsjiofhiofjiaosfoijfioaf</p>
</div>
</div>
<script>
$('h3').click(function(){
$(this).next().toggle();//next()是下一个兄弟元素，toggle()实现了你循环多次点击的功能，在jquery中已封装好
});
</script>
</body>
歪步哒哒哒 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();

			})

		})
jquery鼠标事件+动画效果
jQuery是-个快速、极简的JavaScript框架， 它是-个优秀的JavaScript代码库，设计的宗旨是“writeless，Do More”,即倡导写更少的代码，做更多的事情。它提供一种简便的JavaScript设计模式， 优化HTML文档操作、事件处理、动画设计和Ajax交互。虽然现在的Vue、react框架风靡世界，但是目前也有不少的jQuery的开发者坚持使用jQuery。本课程主要是jQuery实战，主要讲解jQuery的API的使用，以及项目实战。
jQuery 实现手风琴效果
jQuery 实现手风琴效果
jQuery动画案例——手风琴、选项卡（点餐）、图片轮播
1、 手风琴1 效果描述：每次点击一张图片，放置图片的父容器的宽从小逐渐变大。图片从垂直居中位置逐渐被拉开且前一张图片逐渐消失，被点击父容器内的图片逐渐出现。 效果图： 思路 由于每次点击一张图片，放置图片的父容器的宽从小逐渐变大。图片从垂直居中位置逐渐被拉开，故只需要使用自定义动画改变图片的高、放置图片父容器div的宽、图片的位置、图片的透明度即可。 最开始时先给每一个div父容器设置d...
day30_jQuery中的动画及案例练习（手风琴，美团外卖点餐，横向轮播）
（手风琴，美团外卖点餐，横向轮播）
jquery 手风琴
效果 点击相应卡片的标签，那么就会切换至卡片的呈现 如果点击03标签，那么01 02 要一起移动 5个效果图片 基本HTML结构如下： 编写5个li标签，包含span以及图片 设置绝对定位，溢出部分overflow:hidden进行隐藏 基本5个li标签需要使用的绝对定位的居...
JavaScript

87,845

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章