首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

点击折叠按钮后,我想添加top + 100,第二次点击应该是top - 100

点击折叠按钮后,我想添加top + 100,第二次点击应该是top - 100。

这个需求可以通过JavaScript来实现。首先,我们需要一个变量来存储当前的top值。然后,我们可以使用一个布尔类型的变量来表示按钮的状态,true表示按钮已经被点击过一次,false表示按钮还未被点击。

以下是一个示例的实现代码:

代码语言:txt
复制
// 初始化top值和按钮状态
var topValue = 0;
var isClicked = false;

// 点击按钮的事件处理函数
function handleClick() {
  if (isClicked) {
    // 第二次点击,top减去100
    topValue -= 100;
  } else {
    // 第一次点击,top加上100
    topValue += 100;
    isClicked = true;
  }
  
  // 更新top值
  // 这里可以根据实际情况来更新页面中的元素,例如修改CSS样式或者更新DOM节点
  console.log("当前top值:" + topValue);
}

// 绑定按钮的点击事件
var button = document.getElementById("fold-button");
button.addEventListener("click", handleClick);

在上述代码中,我们使用了一个变量topValue来存储当前的top值,初始值为0。另外,我们使用了一个布尔类型的变量isClicked来表示按钮的状态,初始值为false。

当按钮被点击时,会调用handleClick函数。在该函数中,我们首先判断按钮的状态。如果isClicked为true,表示按钮已经被点击过一次,此时我们将topValue减去100。如果isClicked为false,表示按钮还未被点击,此时我们将topValue加上100,并将isClicked设置为true。

最后,我们可以根据实际情况来更新页面中的元素,例如修改CSS样式或者更新DOM节点。在示例代码中,我们使用console.log来打印当前的top值。

请注意,上述代码仅为示例,实际应用中可能需要根据具体情况进行适当的修改和调整。

关于云计算和相关概念,腾讯云提供了丰富的产品和服务。您可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

动手练一练,做一个响应式的后台管理面板

媒介查询等响应式相关的知识点;菜单折叠的问题,这里需要通过JS脚本来触发菜单文本和logo的隐藏;小屏设备菜单的按钮,我们默认隐藏在左边的菜单里,通过媒介查询器触发显示,并需要在按钮添加JS事件,触发菜单的打开与隐藏... 你可能注意到,添加了 svg 部分,并且设置了隐藏,这里我们使用 SVG Sprites(雪碧图)技术,方便我们在菜单里添加菜单图标,这里从 Envato 网站下载了后台管理相关的图标...当我们每次点击菜单的 折叠/展开 按钮时,菜单将会折叠, 如下图所示: ?...这里需要注意菜单折叠按钮的变化,点击按钮时将会旋转180度。...- 40px); } } 处理完折叠,由于图标上的文字被隐藏,我们需要添加一个鼠标经过事件,在链接里添加个title属性,让用户明白菜单的作用,用于显示菜单的文本信息,示例代码如下: const

1.3K10

动手练一练,做一个现代化、响应式的后台管理首页

你可能注意到,添加了 svg 部分,并且设置了隐藏,这里我们使用 SVG Sprites(雪碧图)技术,方便我们在菜单里添加菜单图标,这里从 Envato 网站下载了后台管理相关的图标...当我们每次点击菜单的 折叠/展开 按钮时,菜单将会折叠, 如下图所示: 这个界面只会在大屏的状态下可见,当菜单折叠时,菜单的宽度将由 220px 变成 40px,菜单的名称将会隐藏,右边的 .page-content...这里需要注意菜单折叠按钮的变化,点击按钮时将会旋转180度。...- 40px); } } 处理完折叠,由于图标上的文字被隐藏,我们需要添加一个鼠标经过事件,在链接里添加个title属性,让用户明白菜单的作用,用于显示菜单的文本信息,示例代码如下: const...,我们先添加一段脚本,用于定义按钮点击事件: const body = document.body; const toggleMobileMenu = document.querySelector("

1.1K00
  • 动手练一练,做一个现代化、响应式的后台管理首页

    曾几何时,动手做一个属于自己的UI框架模板,看了手里现存的源码,最终还是放弃了,做好这个,除了代码量还要有产品化的思维,做好真心不容易。...5、关于菜单的折叠和切换,这里我们需要添加少许的JS。...当我们每次点击菜单的 折叠/展开 按钮时,菜单将会折叠, 如下图所示: 这个界面只会在大屏的状态下可见,当菜单折叠时,菜单的宽度将由 220px 变成 40px,菜单的名称将会隐藏,右边的 .page-content...折叠按钮再被点击时,将会旋转180度。...- 40px); } } 处理完折叠,由于图标上的文字被隐藏,我们需要添加一个鼠标经过事件,在链接里添加个title属性,让用户明白菜单的作用,用于显示菜单的文本信息,示例代码如下: const

    1.1K00

    10个CSS技巧,极大提升用户体验

    点击区域 有时你的按钮很小,这可能导致用户无法准确点击按钮。这种现象经常发生在移动端上。如果用户点击次数太多,没有点击他们想要的按钮,或者点击错误的按钮,会让他们感到非常沮丧。...具体来说:我们可以使用伪元素来增加一个元素的可点击区域。 例如,这里有一个按钮。 btn 然后我们可以为它添加一个伪类。...left: -20px; } 这时,如果我们点击按钮周围的区域,我们仍然可以触发按钮点击事件。...如果你想在文本被选中添加一些额外的样式,你可以使用::selection 。::selection CSS伪元素将样式应用于文档中被用户突出显示的部分(比如在文本上点击和拖动鼠标)。 但要记住。...在这一点上,我们可以将溢出的文本折叠起来。做到这一点就像添加三行CSS样式一样简单。

    80510

    接口测试平台代码实现124: 全局变量-3

    ------------------正文开始------------------ 既然我们已经成功搞定了后端进入的函数,所以我们专心搞前端: 打开我们的P_global_data.html: 跟随的思路开始...,要展示表中所有符合的变量套,那么前端最外层应该是个for循环才对: 那里面呢?...的设计是 循环的是变量套的名字,名字本身是一个按钮点击可以进入编辑: 添加了这个按钮,看看当前的样子: 可以发现位置 肯定不好。...所以我们 给它换个好的位置: 现在距离左边界有了100px的距离了: 现在我们去后台,多造一条数据,这样就可以看出 多个变量套的排列问题了: 可以看到 排列如此: 问题1:没有竖向排列 问题2:...效果如下: 效果如下: 现在还差删除和 增加按钮了。 删除按钮 是可以删除任意的,所以它要在循环内。

    24840

    Hexo的Next主题优化教程

    添加全文阅读的按钮 Next主题默认是没有全文阅读按钮的,文章是全部展开形式的,但是可以设置成如下效果: 图片 共有两种配置方法,分别如下: 在md文件中需要折叠的地方添加,则在其下方的内容都将会折叠起来,只有点击阅读全文按钮才会显示出来。... 添加的位置如下图,可自行根据个人喜好更换位置: 图片 以上设置完毕只是显示整个站点的次数,并没有显示每篇文章的访问次数,效果如下图: 图片 如果想要显示每篇文章的访问次数...categories: Spring Boot top: 100 --- 文章加密访问 有些文章涉及到隐私可能需要密码才能访问,此时就可以设置加密,效果如下图: 图片 在themes->next->layout...: 100 password: 123456 --- 全部配置完成,这篇文章必须输入密码123456才能访问。

    88630

    CSS劫持攻击

    ClickJacking点击劫持 当访问某网站时,利用CSS将攻击者实际让你点击的页面进行透明化隐藏,然后在页面显示 一些东西诱导让你点击点击则会在用户毫不知情的情况下做了某些操作,这就是点击劫持...iframe覆盖 假如现在我们有个贴吧,让人关注,可以构造一个钓鱼页面,诱导用户点击,实际上攻击者想要用户点击的关注页面是个透明的,用户如果在网页端登录了贴吧,就会在毫不知情的情况下关注了贴吧,这属于危害较小的情况...> html,body,iframe{ display: block; height: 100%; width: 100%...-- 例子中的按钮位置是写定的,在不同分辨率下并不一定合适,应该动态确定按钮位置,但是作为一个Demo就不作过多操作了 --> 那些不能说的秘密查看详情</...;position: fixed;top: 0;left: 0;width: 1000000px;height: 100000px;,也是就是让链接作为块级元素充满整个屏幕,则用户无论点击页面中的任何地方都会跳转到你指定的页面

    75130

    前端开发者都应知道的 jQuery 小技巧

    回到顶部按钮 预加载图片 检查图片是否加载完毕 自动修复损坏的图片 Hover 上的 Class 开关 禁用 input 字段 停止链接加载 淡入淡出/滑动开关 简单的折叠效果 将两个 Div 设为相同高度...,你无需插件便可创建一个简单地回到顶部动画: // Back to top $('a.top').click(function (e) { e.preventDefault(); $(document.body...-- Create an anchor tag --> Back to top 将 scrollTop 的值改为你想要 scrollbar 停止的地方...禁用 input 字段 有时你也许让表单的提交按钮或其文本输入框变得不可用,直到用户执行了一个特定行为(例如确认 “已经阅读该条款” 的复选框)。...但如果让该元素在第一次点击时显现,第二次点击时消失,下面的代码可以很好地完成这个工作: // Fade $('.btn').click(function () { $('.element').fadeToggle

    2.3K30

    小白如何在博客园上创建一个自己的超美化博客

    目录 一、前言 二、账号注册与申请我的博客 三、设置的博客中的板式 四、在的博客中添加看板娘 五、在的博客中添加点击特效 六、在的博客中添加雪花飘落特效 七、设置背景音乐 八、设置博客文章评论功能...九、设置博客点赞按钮 十、设置博客文章返回顶端按钮 一、前言 总想着一个人学了那么多东西,最后究竟有什么留了下来了?...3、点击写博客,需要申请写博,你就如实填写写博理由,提交一般等待一两个小时就能通过了。...四、在的博客中添加看板娘 1、申请js。下图是已经申请过的,接下来的教程都是需要申请js才能正常显示。提交申请理由一般会在几个小时内审核完。 ?...五、在的博客中添加点击特效 参考原博主连接:https://www.cnblogs.com/wkfvawl/p/9414180.html 1、鼠标点击特效。

    4.9K10

    Android性能优化之TraceView和Lint使用详解

    代码提示我们在6行需要为ImageView添加ContentDescription属性,突然感觉好强大。 其实我们还可以用它自定义搜索,主要是删除一些无用的文件用的。 ? ? ?...3.选择sample base profiling,等待一会,然后再次点击这个按钮停止(开始的时候红点会变成灰色小方块,停止的时候再次点击这个按钮就               好了) 注意事项:在第三步的时候...Incl Cpu Time define inclusive : 全包括的 上图中可以看到0(toplevel) 的Incl Cpu Time 占了100%的时间,这个不是说100%的时间都是它在执行,...而且调用方法top的方法的执行时间是100ms,那么: Incl Cpu Time top 10% a 10% b 20% c 30% d 40% 从上面图中可以看到: toplevel...Real Time / Call Real Time 和 Cpu Time 现在还不太明白它们的区别,的理解应该是: Cpu Time 应该是某个方法占用CPU的时间 Real Time 应该是这个方法的实际运行时间

    89260

    iOS APP添加桌面快捷方式

    [1.png] 实现 首先,添加到桌面功能的操作流程是: 客户端打开APP -> 进入到对应到APP功能模块 -> 点击添加快捷方式到桌面按钮 -> 跳转浏览器,并加载引导页面,点击分享,选择添加到主屏幕...然后会发现,还有一个问题,使用方法一的时候,添加快捷标签到桌面,第一次点击打开了APP,然后这个快捷标签如果没有关闭,直接从桌面再次打开,发现时白屏,并没有再次触发加载,也就没有跳转APP。...示例如下 但是对比支付宝的添加到桌面发现支付宝的也是采用的方法一,第一次从桌面添加的快捷打开时自动跳转到支付宝,第二次点击桌面到快捷图标时,发现也是停留在一个页面,但是支付宝在这个页面上放了东西,可以称之为中间页...这样,第一次点击时,是桌面-中间页-APP的URL Scheme;第二次点击时,则是直接显示中间页,然后手动点击中间页上的立即进入,再次打开APP。...发现结果是期望的,即第一次打开直接跳转,第二次打开显示中间页上面有点击跳转按钮;但是中间页的样式看起来确跟支付宝的不一样,这样生成的中间页因为经过了一次跳转,所以顶部和底部都显示了Safari二级页面的样式

    5.1K40

    easyUI的常用API

    将框架包解压, 整个文件夹复制到项目中,并将文件夹名称修改为easyui 3....选项卡使用的class是: easyui-accordion 在easyui-tabs元素中添加一个div就是一个子选项卡 子选项卡可以通过title属性来指定标题, data-options添加关闭按钮...title: 窗口标题, 类型为string 重写了一些data-options属性 : collapsible: 是否可折叠 , 类型boolean 默认true minimizable: 是否显示最小化按钮...给菜单中的条目 添加点击事件 给最外层的菜单div添加: data-options="'onClick':函数名称" 点击事件函数的编写, 需要设计一个形式参数, 会接受到被点击的元素对象...: 指定弹出的菜单项的选择器(被指定的元素与子元素使用块级元素div) 注意, 如果需要处理点击事件, 给单个元素添加onclick即可 案例: <a href="void(0)" class

    2.5K30
    领券