对slideToggle()的进一步了解

最新推荐文章于 2021-04-07 18:22:07 发布

LaceyXia

最新推荐文章于 2021-04-07 18:22:07 发布

阅读量712

点赞数

分类专栏： web前端文章标签： slideToggle

本文链接：https://blog.csdn.net/LaceyXia/article/details/59109822

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

slideToggle()的效果类似手风琴，但是在做的时候发现它的效果点击时只有对当前项进行展开和收起。但是需要的效果是当我们点击下一个选项时其他的可以收起，主要是针对如下图1-1 所示的点击效果

图1-1

对于一个初学者来说这个问题我也解决了将近三个小时，最后就是通过分析html代码中的父级和子级结构，理清其关系后再进行对js代码的书写基本就可以解决了；

未解决前的js代码如下图1-2 所示

图1-2

解决后的js代码如下图1-3 所示

如果有更简单更好的方法希望大家可以教教我哦！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LaceyXia

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

jQuery一对一商品映射比较代码

07-31

在电子商务网站中，这种功能可以帮助用户快速了解不同商品之间的差异，从而做出购买决策。jQuery在此场景中的作用是提供一个用户友好的界面和流畅的交互体验。要实现这个功能，我们需要以下步骤： 1. **数据获取*...

显示隐藏切换 slideToggle()方法

最新发布

weixin_49098968的博客

06-07

784

当我们通过点击（还可以是其他交互方式）一个按钮来控制被选元素的显示和隐藏时，需要判断被选元素是显示状态还是隐藏状态，如果该元素是显示状态，那么点击时就需要隐藏，否则相反。这样判断的话会很麻烦，还需要判断元素的状态，此时我们使用slideToggle() 方法就能够很好的解决这个问题。

参与评论您还未登录，请先登录后发表或查看评论

18.使用slideToggle()方法实现图片“变脸”效果

weixin_34368949的博客

03-19

248

使用slideToggle()方法可以切换slideUp()和slideDown()，即调用该方法时，如果元素已向上滑动，则元素自动向下滑动，反之，则元素自动向上滑动，格式为： $(selector).slideToggle(speed,[callback]) 其中speed参数为动画效果时的速度值，可以为数字，单位为毫秒，也可是“fast”、“slow”字符，可选项参数callback为方法...

通过jQuery的slideToggle()方法实现元素的显示隐藏时，利用当前ul元素display的值判断状态遇到的问题

w1119498707的博客

04-07

517

项目场景：通过jQuery的slideToggle()方法实现元素的显示隐藏时，利用当前ul元素display的值判断状态，点击当前p标签时，显示隐藏兄弟元素ul，当ul显示时p为灰色，隐藏则p为蓝色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

jQuery slideToggle() 方法

weixin_30701521的博客

07-29

891

如果说slideToggle 无效或者说点击事件点击一下就收回，那就看看函数效果对不对，即slideUp 和slideDown //最新动态的上下滑动 //获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。 //slideUp:通过高度变化（向上减小）来动态地隐藏所有匹配的元素 //slideD...

扩展JQuery中的slideToggle()方法

LIHENHAO的专栏

05-12

2223

一、 slideToggle()方法作用：可以方便的控制文本框的上下缩放（就是Y方向上变大，变小）。缺点：不能指定缩小的最小值，也不能指定放大的最大值。解释：缩小的时候，slideToggle() 使用的Y值为0，也就是缩小到0，不能让开发者自由指定最小值；放大时，使用的是被伸长控件的height值，也不能让开发者指定除heig

jQuery_demo:对jQuery的理解并熟悉--动手试试，别只顾看

05-13

在`jQuery_demo-master`这个压缩包中，很可能包含了示例代码和练习项目，帮助你进一步了解和实践jQuery。你可以通过运行这些例子来加深理解，比如创建一个响应用户交互的动态网页，或者使用Ajax从服务器获取数据并...

simple-jQuery:封装简单版的jQuery，替代初学者对jQuery源码研究的入门参考

03-23

"simple-jQuery"项目旨在为初学者提供一个简化的jQuery版本，作为了解jQuery基本原理和功能的起点。 **jQuery的核心特性** 1. **选择器（Selectors）**：jQuery提供了丰富的CSS选择器，使得选取HTML元素变得极其...

Jquery 1.3 API（对jquery1.3版本中的接口有详细的说明）

03-13

**jQuery 1.3 API 知识点详解** jQuery，作为一个高效、易用的JavaScript库，自诞生以来就深受开发者喜爱...在实际项目中，可以根据需要进一步查阅jQuery 1.3 API文档，了解每个方法的详细参数和用法，以便灵活应用。

jquery滑动复选框菜单特效代码

03-20

标题 "jquery滑动复选框菜单特效代码" 涉及到的是一个使用JavaScript库jQuery实现的交互式用户界面设计，特别关注于...通过研究提供的代码示例和相关文档，开发者可以进一步了解如何利用jQuery的动态效果提升用户体验。

jquery中的toggle与slideToggle的区别

gengyudan的专栏

05-08

5472

jQuery中的 toggle和slideToggle 方法，都可以实现对一个元素的显示和隐藏。强大啊~ 区别是： toggle：动态效果为从右至左。横向动作。 slideToggle：动态效果从下至上。竖向动作。 so，比如想实现一个树由下至上收缩的动态效果，就使用slideToggle就ok了。此外，toggle和slideToggle 还有一些参数可以设置，具体看j

.slideToggle()滑动

always007的博客

11-08

667

p { width:400px; } Toggle This is the paragraph to end all paragraphs. You should feel lucky to have seen such a paragraph in your life. Congratulations! $("button"

显示和隐藏状态之间切换 slideToggle()

龚清林的博客

10-10

2869

通过使用滑动效果，在显示和隐藏状态之间切换元素：$(".btn1").click(function(){ $("p").slideToggle(); });

jQuery slideUp（），slideDown（）和slideToggle（）示例

一名可爱的技术搬运工

05-21

1181

jQuery带有三种方便的方法来轻松创建滑动效果。 slideUp（）–隐藏具有向上滑动效果的匹配元素。 slideDown（）–显示具有向下滑动效果的匹配元素。 slideToggle（）–如果显示匹配的元素，它将隐藏并具有上滑效果；如果隐藏，它将以向下滑动效果显示。以上三种方法都是将支持持续时间作为参数：慢速，快速或精确毫秒。如果省略此参数，则默认为400毫秒。 ...

JQuery实现slideToggle（）滑动的效果

郭贝贝的博客编程

06-26

2611

当鼠标点击图标时，文本内容隐藏起来，HTML代码<div class="global_module news"> <h3>最新动态</h3> <div class="scrollNews"> <ul>

动画切换的比较 (jQuery)

weixin_30425949的博客

12-11

160

1jQuery中toggle与slideToggle以及fadeToggle的比较操作元素的显示和隐藏可以有几种方法。例如：改变样式display为none 设置位置高度为0 设置透明度为0 都能达到这个目的，并且针对这样的处理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外，还引入...

jQuery 效果 - 滑动 slideDown()与slideUp()与slideToggle()